jquery navbar动画不能正常工作

我通过这个网站看了类似的问题，但找不到任何。jquery navbar动画不能正常工作

所以我一直在使用bootstrap3在网站上工作一段时间，大部分的格式化/设计部分已经完成，但有一个问题我不能解决我自己。我添加了jquery使navbar缩小并在用户向下滚动到某个点时改变背景颜色（感谢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, 
    }) 

});

感谢提前的帮助！

来源

2016-06-30 Reiko Kawahara

它解决了吗？ –

不错的网站！

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

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

你可以做的是简单地删除类，和你上面的脚本将帮助处理添加/删除此类底座上scrollTop值。像这样的东西将有所帮助：

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

来源

2016-06-30 03:21:05

谢谢你的建议！它在本地html文件上工作，但不在服务器html上。这很奇怪，因为当我更改服务器html时，整个标题消失了，但是当我添加类动画标题时，它现在工作正常。所以我最终在课堂上有了动画标题，就像当我遇到问题一样......任何想法可能是这个原因.... ?? –

实际上，第一个问题已经解决了，但是现在最右边的菜单被切断了...这太令人困惑了 –

**我刚刚从本地上传了一个新的html，并删除了动画头类并且它似乎正在工作。我讨厌这种不一致...... –

我们将我们的滚动位置设置回零，所以这工作正常。加这个，

$(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"); 
     } 
    }); 
});

来源

2016-06-30 06:05:54 frnt

jquery navbar动画不能正常工作

回答

相关问题