我浏览了这个网站以寻找类似的问题，但找不到。
所以我一直在使用 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,
})
});
提前感谢您的帮助!
最佳答案
不错的网站!
看看您的 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 -->
关于javascript - Jquery 导航栏动画无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38113374/