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

Question

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

所以我一直在使用 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,
  })

});

提前感谢您的帮助!

Answer 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 -->