javascript - 粘性导航问题 - "position: fixed"可能未生效

标签 javascript jquery html css

我有一个托管在平台 (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/

相关文章:

jquery - 获取 405 method not allowed 异常

javascript - 在嵌入式YouTube iframe中检测事件?

javascript - 在 python 中使用 selenium 执行 javascript 后存储结果

javascript - 单击文本时在转发器中选择/取消选择复选框

Javascript:onSubmit 函数在函数完成之前提交表单?

javascript - 我想指定一个http请求的主机,Greasemonkey可以帮我完成这项工作吗?

javascript - AJAX 完成后滚动到 div 的底部

html - 不同路线的不同图标

javascript - 如何从 JQUERY 中的 HTML 文档获取 XML 对象

javascript - HTML 输入不会在handleChange 上更新