Question

我正在尝试使用bootstrap构建导航栏，并在导航的品牌区域添加jQuery效果。

我想要实现的目标：当用户滚动时，文本“公司名称”向上滑动并被品牌图像替换。当页面滚动回到顶部时，效果会反转。这是我到目前为止的尝试：

$(window).scroll(function() {
 if ($(document).scrollTop() > 50) {
     $('.navbar').css({'background': 'rgba(0,0,0,0.8)'});
     $('.brand-content').animate({'marginTop' : "-=100px", function(){
        $('.navbar-brand').css({'font-size':'14px'});
        $('.brand-content').html('<img src="http://s12.postimg.org/hyoq90vkp/cpcm_logo.png"/>').animate({'marginTop' : "+=100px"});

}});


} else {
     $('.navbar').css({'background': 'rgba(0,0,0,0.15)'});
     $('.brand-content').animate({'marginTop' : "-=100px", function(){
          $('.navbar-brand').css({'font-size':'14px'});
          $('.brand-content').html('Company Name').animate({'marginTop' : "+=100px"});

}});

}
});

此刻，文字向上滑动，但图像不会向下滑动。我还注意到，当我使用fadeIn和fadeOut进行此操作时，每次用户滚动时该函数都在运行，而不是仅在从顶部滚动并返回顶部时才运行。

我愿意尝试任何解决方案，只要效果顺畅。

编辑：https://jsfiddle.net/w8mm5mfc/1/忘了添加小提琴！

Answer 1

您的jQuery每次都在运行，因为每次用户滚动时您的函数都会触发，如第一行所定义：

$(window).scroll(function() {

如果你想阻止这种情况发生，你将要在第一次发生变量时添加一个变量，如果已设置此变量则停止该函数再次运行

对于第二个问题，脚本中存在语法错误：

$('.brand-content').animate({'marginTop' : "-=100px"}, function(){
    $('.navbar-brand').css({'font-size':'14px'});   ^
    $('.brand-content').html('<img src="http://s12.postimg.org/hyoq90vkp/cpcm_logo.png"/>').animate({'marginTop' : "+=100px"});
});

注意第一行（我添加了箭头）和最后一行 - 我已将花括号关闭（＆＃34;}＆＃34;）移到marginTop语句之后，并将其从最后一行中删除。它很微妙，但很重要！

Answer 2

你有几个选择，但我相信你个人使用javascript做得太多了（使用纯CSS可以实现很多想要的效果）。

我已更新您的示例：https://jsfiddle.net/74pwvw7a/2/

我已将您的javascript简化为仅跟踪您的网页正文是否正在滚动：

$(window).scroll(function () {
    if ($(document).scrollTop() > 50) {
        $("body").addClass('scrolling');
    } else {
        $("body").removeClass('scrolling');
    }
});

对于HTML，我将图像添加为标记的一部分（但只显示正确的位）。

<div class="navbar-header"> <a class="navbar-brand" href="#">
  <div class="brand-content">Company Name</div>
  <div class="brand-image">
      <img src="http://s12.postimg.org/hyoq90vkp/cpcm_logo.png"/>
  </div>
</a>

CSS改变了：

.brand-content, .brand-image{
    display: block;
    background: green;
    height: 50px;
    line-height: 50px;
    transition : all 0.4s ease-in;
    -moz-transition: all 0.4s ease-in;
    -webkit-transition: all 0.4s ease-in;
}

.brand-image img{
    height: 100%;
}

.navbar-brand{
    position: relative;
    padding: 0px;
    overflow: hidden;
}

.scrolling .brand-image {
    display: block;    
}

.scrolling .brand-content {
    margin-top: -50px;
}

发生了什么事？ - 您基本上只调整文本块的边距。一旦页面开始滚动，你将给它一个负的上边距，因为容器有溢出：隐藏，一旦它滚出容器的视口，它将被隐藏。因为图像位于该元素下方（并且被切割出视图），所以它将相反地滚动到视图中。所有动画都由css处理。您可以使用-transition属性调整缓动和时序。

jQuery动画Div的边缘页面滚动

2 个答案: