javascript - jquery Sticky-nav-bar 的行为像 CSS3 动画，如何停止它？

Question

实时网站位于以下地址:www.calimousineservice.com 您好，我正在制作这个简单的网站，我尝试在顶部包含一个粘性导航。到目前为止，一切都按预期工作，唯一的问题是，当我滚动时，Jquery 的行为就像滑入动画，而不是立即粘在窗口顶部。另外，因为我附加了这个，所以我的图像 slider 在滑动图像时有某种滞后。我将所有脚本和 file.js 附加在 html 底部，除了上传的 js 文件之外，还有用于粘性导航的 javascript:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle2.min.js"></script>

<script>
    function makeSticky() {
        var myWindow = $(window), 
        myHeader = $(".navigation");

        myWindow.scroll(function() {
            if (myWindow.scrollTop() == 0 ) {
                myHeader.removeClass("sticky-nav");
            } else {
                myHeader.addClass("sticky-nav");
            }
        });
    }
    $( function() {
        makeSticky(); 
    });
</script>

还有另一个脚本，当向下滚动时会在导航栏右侧弹出一个图像:

<script>
    function hideImg() {
        var myWindow = $(window),
        container= $(".nhide");

        myWindow.scroll(function() {
            if (myWindow.scrollTop() == 0 ) {
                container.addClass("nhide");
            } else{
                container.removeClass("nhide");
            }   
        });  
    }

    $( function() {
        hideImg(); 
    });
</script>

请向下和向上滚动几次以了解我在这里所说的内容。导航栏在滚动时就像滑入动画(如 css3 动画)，我想将其删除。还有我的 slider 的问题。提前谢谢您，如果我需要提供更多代码，请告诉我。

Answer 1

它位于幻灯片下方。要修复此问题，请将导航栏 z-index 属性的值设置为大于幻灯片的 z-index。

我猜 z-index:999 可以修复它!

更新:

将导航栏的 transition 属性设置为 0。因为似乎有全局选择器用于设置转换。

确保您使用最具体的选择器，以防止其他元素的规则统治您的导航栏。

示例:

#yournavbar_container .navbar {
  transition: 0s;
}

或将所有值设置为默认值:

#yournavbar_container .navbar {
  transition: all 0s ease 0s;
}

您还可以使用这个:

#yournavbar_container .navbar {
  transition:none;
  transition-delay:0s;
  transition-duration:0s;
  transition-property:none;
  transition-timing-function:ease;
}