Question

我是简单的滚动脚本：

var nav = doc.find('#site-navigation');
var scrollPos = nav.offset().top - nav.height();
var margin = parseInt( nav.css('margin-top') );
win.bind('scroll', function() {
     if (win.scrollTop() > scrollPos ) {
         nav.addClass('small').next().css('margin-top', nav.height() + margin );
     } else {
         nav.removeClass('small').next().css('margin-top','auto');
     }
     return;
});

.main-navigation {
    background: none repeat scroll 0 0 #959595;
    clear: both;
    display: block;
    height: 50px;
    width: 100%;
    z-index: 5 !important;
}
.main-navigation.small {
    box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.51);
    height: auto;
    margin: 0 !important;
    opacity: 0.8;
    position: fixed !important;
    top: 0;
    transition: opacity 0.4s ease-in-out 0s;
    z-index: 4 !important;
}

此脚本运行良好，但在其中包含单篇文章标题的页面（小文档高度）（http://www.cablook.com/tag/kreativnost/）成功滚动取决于浏览器缩放。向较小方向迈出一些步骤并且滚动停止工作，因为跳跃＆＃34;跳跃＆＃34;。我已经对代码进行了调查，发现nav.addClass('small')不起作用。虽然nav[0].className相等＆＃34;网站导航小＆＃34;，但实际元素没有变化。这个问题对于Firefox 28，IE9-11来说是真实的（但并非总是如此）。 Safari6 for MAC不受影响，工作正常。我已经尝试了所有变体来为元素添加类，但都是一样的。有人可以帮忙吗？

jQuery addClass有时不起作用（取决于文档高度）

0 个答案: