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

【问题标题】：Jquery navbar animation not working properlyJquery 导航栏动画无法正常工作
【发布时间】：2016-07-04 17:48:25
【问题描述】：

我浏览了这个网站寻找类似的问题，但找不到任何问题。

所以我现在已经在使用 bootstrap3 的网站上工作了一段时间，并且大部分格式/设计部分都已完成，但有一个问题我自己无法解决。当用户向下滚动到某个点时，我添加了 Jquery 以使导航栏缩小并更改背景颜色。（感谢 peeps 在这里帮助我）它有点工作，但它的运动真的很奇怪。加载页面时，导航栏已经缩小并且背景是彩色的，但是当滚动一点时，它的大小会变大并且背景消失，并且当滚动到我设置 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,
  })

});

提前感谢您的帮助！

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap-3

【解决方案1】：

不错的网站！

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

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

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

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

【讨论】：

感谢您的建议！它适用于本地 html 文件，但不适用于服务器 html。这很奇怪，因为当我更改服务器 html 时，整个标题消失了，但是当我添加类动画标题时，它现在可以正常工作了。所以我最终在课堂上出现了动画标题，就像我遇到问题时一样......任何想法可能是什么原因......？？
其实第一个问题已经解决了，但是现在最右边的菜单被砍掉了……太混乱了
** 我刚刚从本地上传了一个新的 html，并删除了动画标题类，它似乎工作。我讨厌这种不一致...
可能是浏览器缓存导致的不一致:)恭喜！

【解决方案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");
        }
    });
});

【讨论】：