CSS Position Fixed Not Working - Sticky Navigation

Question

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.

I think your code is quite ok. But under the link you've provided I cant find any element with the class `.navigation` and this is what you target in your jQuery. Am I missing anything out or did this already solve your problem? — doefom, Oct 26 '16 at 11:08
Read description of `position: fixed` on https://developer.mozilla.org/en-US/docs/Web/CSS/position - That will explain why @gauss is right — Flyer53, Oct 26 '16 at 11:42
Apologies guys, I thought I would be helpful by renaming the actual element to "navigation" so it looked better for you guys. I did this because the actual element class names are huge and look messy. I won't do it again though as I see this caused issues. Thanks for your answers and for the time taken to read this :) — , Oct 26 '16 at 13:11

score 2 · Accepted Answer · edited May 23 '17 at 10:34

2

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

edited May 23 '17 at 10:34

Community

1
1

answered Oct 26 '16 at 11:28

gauss

177
12

1

Genuis! Thank you so very much. – Oct 26 '16 at 13:10

CSS Position Fixed Not Working - Sticky Navigation

1 Answers1