Question

滚动时，我有一个浮动在窗口内的菜单。目前我的菜单总是从窗口顶部保持190px。我正在使用维度插件，这是我的jQuery：

$(document).ready(function() {    
menuYloc = parseInt($('#mainMenu').css('top').substring(0,$('#mainMenu').css('top').indexOf('px')))
    $(window).scroll(function () {
        var offset = menuYloc+$(document).scrollTop()+'px';
        $('#mainMenu').animate({top:offset},{duration:600,queue:false});  
    });
});

我想要完成的是当您滚动到页面顶部时，菜单距离顶部190px。然而，当你开始向下滚动时，菜单会滚动页面直到距离窗口顶部50px，然后它开始浮动，始终保持距离窗口顶部50px，除非你向上滚动到顶部页。

希望有意义，如果你有解决方案，请告诉我。

Answer 1

var minDistance = 50;
var startDistance = 190;
$(window).scroll(function() {
    var scrollTop = $(document).scrollTop();
    if (scrollTop > startDistance - minDistance) {
        $('#mainMenu').css('top', scrollTop + minDistance);
    } else {
        $('#mainMenu').css('top', startDistance);
    }
});

<强>小提琴：
http://jsfiddle.net/d52wr/

Answer 2

一种方法是根据滚动距离更改position和top属性。这种方法允许浏览器在滚动发生时在渲染循环期间处理显示，与仅top方法相比，导致更平滑的过渡，因为事件处理可能会发生闪烁伪像。

var minDistance = 50;
var startDistance = 190;
$(window).scroll(function() {
  var scrollTop = $(document).scrollTop();
  if (scrollTop > startDistance - minDistance) {
    $('#mainMenu2').css({position: 'fixed',
                         top: minDistance});
  } else {
      $('#mainMenu2').css({position: 'absolute',
                           top: startDistance});
  }
});

这是一个jsfiddle，展示了两种方法之间的并排比较：http://jsfiddle.net/nKAtB/。在某些浏览器中，当快速滚动或长距离滚动时，可以观察到闪烁效果，并在每次滚动事件后定位div。

Answer 3

好的，谢谢@twsansbury和@andy。看起来我已经把你的推动朝着正确的方向想出来了。

这是我最终的结果：

var minDistance = 50;
var startDistance = 190;
$(window).scroll(function() {
    var scrollTop = $(document).scrollTop();
    var newDistance = (scrollTop + minDistance);
    if (scrollTop > startDistance - minDistance) {
        $('#mainMenu').animate({top:newDistance},{duration:600,queue:false});
    } else {
        $('#mainMenu').animate({top:startDistance},{duration:600,queue:false});
    }
});

这是一个jsfiddle，显示了三个解决方案之间的比较：http://jsfiddle.net/cpL69/

再次感谢您的帮助：）

当div到达页面顶部一定距离时开始制作动画

3 个答案: