Question

我通过这个网站查看了类似的问题，但找不到任何问题。

所以我现在一直在使用bootstrap3开发一个网站，大部分格式/设计部分都已完成，但有一个问题我无法解决。当用户向下滚动到某个点时，我添加了Jquery使导航栏收缩并改变背景颜色。（感谢窥视帮助我在这里）它有点工作，但它的运动真的很奇怪。当加载页面时，导航栏已经缩小并且背景已经着色，但是当滚动一点时它会大小爆炸并且背景消失，当滚动到更多点我设置Jquery开始工作时，导航栏缩小和背景颜色再次变化。这很难以书面形式解释，所以请看网站，看看我在说什么。以下是我正在处理的网站。

测试网站

我假设Jquery在加载时不起作用，因此最初不会隐藏CSS设置（较短的导航栏高度和背景颜色）。

以下是jquery代码：

$(document).ready(function(){
$(window).scroll(function () {
    if ($(window).scrollTop() > 70) {
        $("#top-bar").addClass('animated-header');
    } else {
        $("#top-bar").removeClass('animated-header');        }
});

$("#clients-logo").owlCarousel({

    itemsCustom : false,
    pagination : false,
    items : 5,
    autoplay: true,
  })

});

提前感谢您的帮助！

Answer 1

不错的网站！

看看你的标题元素，你会发现你已经把animated-header类放在那里导致问题。这是你的代码：

<header id="top-bar" class="navbar-fixed-top animated-header">

您可以做的只是删除该类，上面的脚本将帮助处理根据scrollTop值添加/删除此类。这样的事情会有所帮助：

<header id="top-bar" class="navbar-fixed-top"> <!-- without animated-header -->

Answer 2

我们将滚动位置设置为零，所以这很好用。加上这个，

$(document).ready(function () {
    $('html,body').animate({
    scrollTop : 0
    },10);
});
$(document).ready(function () {
$(window).scroll(function(){
        if($(window).scrollTop() >= 70){
            $("#top-bar").addClass("animated-header");
        }
        if($(window).scrollTop() <= 70){
        $("#top-bar").removeClass("animated-header");
        }
    });
});

Jquery导航栏动画无法正常工作

2 个答案: