我有一个托管在平台 (Zoey Commerce) 上的电子商务网站。在这个网站上,我有一些非常简单的 jQuery,它将 CSS 应用于元素(标题导航),以便将其固定在页面顶部,从而在滚动时创建粘性导航。
问题是页眉导航元素固定在页面顶部,但它不随浏览器滚动移动,这不像 position: fixed
通常那样执行。
请在此处查看网站以查看发生了什么:
http://ts367609-container.zoeysite.com/
请看下面我的代码:
<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;
}
代码再简单不过了,所以我认为是电子商务平台导致 position: fixed
行为异常。任何人都可以发现我错过的任何东西吗?非常感谢您查看此内容,感谢您提前给出的答复。
最佳答案
尝试使用 toggleClass
而不是像这样的 if..else
$window.scroll(function() {
$('#global-wrapper-cp-142f9c37e921e052ae02cddde9be836b').toggleClass('fixed', $(window).scrollTop() > num);
});
希望对您有所帮助:)
关于javascript - 粘性导航问题 - "position: fixed"可能未生效,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38272602/