matt136 matt136 - 1 month ago 11
CSS Question

CSS Position Fixed Not Working - Sticky Navigation

I have a small and very simple segment of jQuery code which applies a class which uses

position: fixed
to the navigation element of my page so that the navigation can become sticky and therefore stay with the user as they scroll down the page.

I am building this on an Commerce platform. The issue is that it looks as though when
position: fixed
is applied to the navigation element, the property isn't working correctly. It looks as though the position is becoming "fixed" but it's only fixed within the header area that it is contained within and I have no idea why this could be happening. Please see below if you would like to see this for yourself:

http://ts564737-container.zoeysite.com/

You can see that after scrolling slightly, the navigation element becomes fixed but not correctly as it should.

Please see my code below:

CSS

.fixed {
top: 0 !important;
z-index: 100 !important;
position: fixed !important;
transition: all 0.3s;
background-color: #000000;
opacity: 0.9;
}


JavaScript/jQuery

<script>
var num = 40;

jQuery(window).bind('scroll', function () {
if (jQuery(window).scrollTop() > num) {
jQuery('.navigation').addClass('fixed');
} else {
jQuery('.navigation').removeClass('fixed');
}
});
</script>


Could anybody provide any insight as to what's going wrong here and causing the element to not fix properly? Any advice at all is much appreciated, thank you so much.

Answer

It's because your some parent/parents container contains css transform property.

I have added this css and your fixed element started working:

* {
    transform: none !important;
}

Fixed elements in parent which have transform property have different behaviour. Related issue