Question

我很乐意帮助解决这个问题，但我遇到了更多问题。

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

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

其次，动画似乎会在您滚动时立即进入，甚至一点点，而我希望它在滚动超过100px时启动。

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

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

如果值＆gt;然后100和navIsBig动画到45 否则，如果值＆lt; = 100并且！navIsBig则动画为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会强制它溢出：隐藏;在动画期间。你必须以另一种方式做到这一点。比如在导航标签外使用您的徽标并使用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"更改为您认为合适的数字。

以下是带有jQuery和修改的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;
  }
 });
 });

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

2 个答案: