Bootstrap Sticky Class Does not Work

guguk

Well-known member
Jul 19, 2019
1,150
828
113
Ottoman Empire
Hello guys,
I need an advice something weird topic, I was research about that and tried suggestion but did not work my end.

I was builded a website via livecanvas (bootstrap based) and I given a class name "sticky-lg-top" which I wanted to be sticky until content end when user scroll. It was working smoothly but I realized recently that it havent been sticky anymore. I inspected that element and it given "position: sticky; top:0 and z-index:1020" but seem not working somehow.
When I change class name to "fixed-top" instead of "sticky-lg-top" it's working.

Could someone faced this issue before?
I attached also page structure.
 

Attachments

  • SSS.jpg
    SSS.jpg
    288.6 KB · Views: 3

MrSam_1

Well-known member
Administrative
Trusted Seller
Dec 1, 2018
23,615
26,958
120
"sticky-lg-top" will position an element at the top of the viewport, from edge to edge, but only after you scroll past it on viewports of 992px or larger (the lg part).

"fixed-top" will position an element at the top of the viewport, from edge to edge on all viewport sizes.
 

guguk

Well-known member
Jul 19, 2019
1,150
828
113
Ottoman Empire
"sticky-lg-top" will position an element at the top of the viewport, from edge to edge, but only after you scroll past it on viewports of 992px or larger (the lg part).

"fixed-top" will position an element at the top of the viewport, from edge to edge on all viewport sizes.
Thank you but I already checking "Large viewport". I already tried only "sticky-top" too but it did not work also. Something overflow problem I guess.
 

MrSam_1

Well-known member
Administrative
Trusted Seller
Dec 1, 2018
23,615
26,958
120
The but only after you scroll past it bit is the key here

"sticky-top" would be used for something like a navbar usually
 

guguk

Well-known member
Jul 19, 2019
1,150
828
113
Ottoman Empire
The but only after you scroll past it bit is the key here

"sticky-top" would be used for something like a navbar usually
Yeah it's a section where middle of page and I'm testing with scolling :) for navbar using "fixed" instead of "sticky". Sticky uses generally for sidebars or something elements.

I found the problem by the way, somehow I was inserted "overflow:hidden" to body class and when I remove it solved. I know that because parent div should not incomplete for "sticky" div but I could not find where overflow class.

Thank you again for suggestion :)
 
  • Like
Reactions: MrSam_1

MrSam_1

Well-known member
Administrative
Trusted Seller
Dec 1, 2018
23,615
26,958
120
Yes, I was just about to send you this lol....

When the element is not becoming sticky you need to check the following things:

  • Check browser support
  • Is offset specified (CSS top property)
  • Is there an overflow property set for the parent element
  • Is there a height property set for the parent element
  • Is a parent element is set to display: flex
 

guguk

Well-known member
Jul 19, 2019
1,150
828
113
Ottoman Empire
Yes, I was just about to send you this lol....

When the element is not becoming sticky you need to check the following things:

  • Check browser support
  • Is offset specified (CSS top property)
  • Is there an overflow property set for the parent element
  • Is there a height property set for the parent element
  • Is a parent element is set to display: flex
Oh thank you for helping I was checked also all of possibilities and I was doubt for "overflow" and finally I found it in my custom.css file :)
 

About us

  • Our community has been around for many years and pride ourselves on offering unbiased, critical discussion among people of all different backgrounds. We are working every day to make sure our community is one of the best.

Quick Navigation

User Menu