Question

首先，我是jquery的新手，我不是很擅长。我有一个固定宽度的div，我希望它在你向下滚动时扩展到全宽。到目前为止，我有以下代码：

var fullwidth = $(window).width();
var smallwidth = 1100;

$(window).scroll(function(){    
    if ($(window).scrollTop() > 0) {
        $('#navigation').animate({width: fullwidth}, 1000);
    } else {
        $('#navigation').animate({width: smallwidth}, 1000);
    }
});

这样做会在滚动时扩展，但是当你再次滚动到顶部时它不会缩回。当我使用fadeOut和fadeIn时它完美无缺。一些帮助将不胜感激！

Gr，Thomas

Answer 1

$（window）.scroll（）不会“实时”运行，但事实上它每隔几毫秒或更长时间触发一次。我建议你看一下throttle/debounce jQuery plugin

我做了一个小模型，在jsfiddle上，你可以在这里找到它：

jsfiddle

我认为代码非常明显。基本上，debounce插件每250ms运行一次回调函数，即使在不到250ms之前调用了最后一个窗口滚动触发器。

JS：

var fullwidth = $(window).width();
var smallwidth = 1100;

$(window).scroll( $.throttle( 250, animate ) )

function animate() {
    var navi = $('#navigation');
    //we're adding .wide class to avoid multiple runs of this animation.
    if (window.pageYOffset > 0 && !navi.hasClass('wide')) {
        navi.addClass("wide").stop().animate({width: fullwidth}, 1000);
    }

    if (window.pageYOffset == 0 ) {
        console.clear();
        console.log(smallwidth);
        navi.stop().animate({width: smallwidth}, 1000, function() {
            $(this).removeClass('wide');
        });
    }        
}

Answer 2

感谢你的awnser，我现在就开始工作了！我仍然不完全理解为什么我的代码不起作用。它确实与fadeIn / fadeOut一起使用，但没有使用动画，这看起来有点奇怪。

还有一件事，是否有一个没有使用那个油门/去抖动jQuery插件的解决方案？

Answer 3

另外，我有点工作在.animate（）之前添加.stop（）。但是，当您在每个滚动操作期间滚动动画卡顿时，它的作用是什么。我在下面做了一个例子。

http://jsfiddle.net/et8hghuw/

＆＃13;

$(window).on("load resize", function() {
  var fullwidth = $(window).width();
  if ($(window).width() >= 500) {
    var smallwidth = 500;
  } else {
    var smallwidth = $(window).width();
  }
  if ($(window).scrollTop() > 0) {
    $('#navigation').css('width', fullwidth);
  } else {
    $('#navigation').css('width', smallwidth);
  }
});

$(window).scroll(function() {
  var fullwidth = $(window).width();
  if ($(window).width() >= 500) {
    var smallwidth = 500;
  } else {
    var smallwidth = $(window).width();
  }
  if ($(window).scrollTop() > 0) {
    $('#navigation').stop().animate({
      width: fullwidth
    }, 200);
  } else {
    $('#navigation').stop().animate({
      width: smallwidth
    }, 200);
  }
});

＆＃13;

任何摆脱口吃的方式？

滚动时div的动画宽度

3 个答案: