CODEWITHSUNDEEP
htmlcsscss-position
Rand
Rand

Reputation: 37

Div set to fixed position not floating with scroll in mobile responsive view

I am trying to add a sticky/fixed bar which should come right after the fixed header for mobile screen width < 420px but even though I have mentioned all the CSS properties which should make the div stick right after the fixed header but its not staying fixed on scroll and I would highly appreciate if anyone can please view this link in mobile view of around 400px using chrome or firebug and let me know what did I do wrong?

Following is the CSS of the div I am trying to float on scroll with the fixed header.

#hstickyfor_mobile {
  z-index: 10000;
  transform: translate3d(0, 0, 0);
  position: fixed;
  top: 100px;
  width: 100%;
  height: 100px;
}

Thanks

Upvotes: 0

Views: 1217

Answers (1)

Derek Brown
Derek Brown

Reputation: 4419

The position is set relative to an ancestor element if it has the transform property set (source).

In your case, while you properly set position: fixed, the .mobmenu-push-wrap element has the transform property set. So the position of the hstickyfor_mobile element is determined relative to the.mobmenu-push-wrap element, which is static.

Upvotes: 1

Related Questions