javascript - 更改标题大小和滚动图像

Question

我得到了很好的帮助解决了这个问题，但我遇到了更多问题。

我希望我的页眉在用户滚动时改变高度并平滑过渡。

目前它似乎在工作，但是当在导航上调整高度时内容被剪裁，即使我在导航上有 overflow:visible。

其次，动画似乎在您滚动时立即出现，即使是一点点，而我希望它在滚动超过 100 像素时开始。

JSfiddle

$(function(){
$(document).scroll( function() {
    var value = $(this).scrollTop();

    if ( value > 100 ){
        $("nav").animate({height:100},"slow");

    }
    else{
       $("nav").animate({height:45},"slow");
    }
});
});

我还希望图像能够平滑过渡地缩小到当前大小的 80%。

Answer 1

您的问题是:每次您使用滚动条时，每次您的功能都会被触发。所以..

例如，如果 scrollTop 等于 80，而您转到 120。该函数将被触发 40 次，因此您将调用 animate 函数 40 次。实际上，由于这个问题，您正在做的事情正在运行，但速度非常慢。

解决方案:您应该使用 bool 值来验证导航标签的状态。

如果值 > 100 并且 navIsBig 然后动画到 45else if value <= 100 and !navIsBig then animate to 100

第二个提示:每次执行 $('nav') 时，jQuery 都会在 DOM 中查找导航。只做一次并保存。

我的 jsFiddle:http://jsfiddle.net/thXDt/8/

$(function(){
  var navIsBig = true;
  var $nav = $('nav');

 $(document).scroll( function() {
   var value = $(this).scrollTop();

   if ( value > 100 && navIsBig ){
      $nav.animate({height:45},"slow");
      navIsBig = false;

   } else if (value <= 100 && !navIsBig ) {
      $nav.animate({height:100},"slow");
      navIsBig = true;
  }
 });
});

关于溢出:可见；对你来说是个坏消息，jQuery 会强制它溢出:隐藏；在动画期间。您将不得不以另一种方式进行。比如在 nav 标签之外使用您的 Logo 并使用 css。