0

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

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

目前它似乎正在工作，但是当在导航上调整高度时，内容正在被剪裁，即使我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%，并平滑过渡。

4

2 回答 2

2

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

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

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

如果 value > 100 并且 navIsBig 然后动画到 45 否则如果 value <= 100 并且 !navIsBig 然后动画到 100

第二个提示：每次你在做 $('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 会强制它溢出：隐藏；在动画期间。你将不得不以另一种方式做到这一点。就像在导航标签之外使用您的徽标并使用 css 一样。

于 2013-10-28T23:25:39.457 回答
1

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

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

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

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;
  }
 });
 });
于 2013-10-29T01:05:03.020 回答