在滚动时更改标题大小和图像

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 次。实际上你正在做的是工作，但由于这个问题非常非常缓慢。

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

如果值 > 100 并且 navIsBig 然后动画到 45 else if value

第二个提示：每次你在做 $('nav') 时，jQuery 都会在 DOM 中查找 nav。只需执行一次并保存即可。

我的 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 一样。

Answer 2

正如 Luc 所说，jQuery 自动将动画中的 overflow: hidden 设置为 height/width 元素。为防止出现overflow: hidden，您可以从http://jquery.com/download/ 下载最新版本的jQuery 并选择未压缩版本 （http://code.jquery.com/jquery-1.10.2.js）。注释掉行9123 //style.overflow = "hidden"。将文件另存为 Javascript 文件，并将其作为外部脚本文件包含在您的标头中。 确保删除 jQuery 引用。

此外，我建议添加.stop() 并将"slow" 更改为您认为合适的数字。

这里是带有 jQ​​uery 和修改的 JSFiddle：>>>CLICK HERE<<<

jQuery:

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

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

  if ( value > 100 && navIsBig ){
      $nav.stop().animate({
           height:45
      },1000);
      navIsBig = false;
  } else if (value <= 100 && !navIsBig ) {
      $nav.stop().animate({
          height:100,
      },1000);
      navIsBig = true;
  }
 });
 });