Sticky Navigation Issue - "position: fixed" Möglicherweise keine Wirkung

Question

Ich habe eine eCommerce-Website, die auf einer Plattform gehostet wird (Zoey Commerce). Auf dieser Website habe ich eine sehr einfache jQuery, die CSS auf ein Element (die Kopfzeilennavigation) anwendet, um es oben auf der Seite zu fixieren und so eine klebrige Navigation beim Scrollen zu erzeugen.

Das Problem ist, dass das Kopfzeilennavigationselement am oberen Rand der Seite befestigt ist, aber es nicht mit dem Browser Scroll läuft, der nicht funktioniert, wie position: fixed normalerweise tun würde.

Sehen Sie hier die Website, um zu sehen, was passiert:

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

Bitte meinen Code unten:

<script> 
var num = 10; //number of pixels before modifying styles 

jQuery(window).bind('scroll', function() { 
    if (jQuery(window).scrollTop() > num) { 
     jQuery('#global-wrapper-cp-142f9c37e921e052ae02cddde9be836b').addClass('fixed'); 
    } else { 
     jQuery('#global-wrapper-cp-142f9c37e921e052ae02cddde9be836b').removeClass('fixed'); 
    } 
}); 
</script> 

CSS:

#pix-fe .fixed { 
    position: fixed !important; 
    z-index: 9999 !important; 
    margin-top: 0 !important; 
} 

Der Code couldn‘ t viel einfacher sein, so dass ich denke, dass die eCommerce-Plattform verursacht position: fixed Fehlverhalten. Kann irgendjemand etwas entdecken, das ich vermisst habe? Vielen Dank für das Betrachten und ich freue mich über alle Antworten im Voraus.

Answer 1

Try toggleClass statt if..else wie diese

$window.scroll(function() { 
    $('#global-wrapper-cp-142f9c37e921e052ae02cddde9be836b').toggleClass('fixed', $(window).scrollTop() > num); 
}); 

Hoffe, es hilft :)