2

我正在创建的网站有一个盒子，里面有多个可滚动的盒子。还有一个图像，需要在用户滚动时与用户一起向下滚动。

我使用滚动事件进行此工作，每次滚动 div 时，我都会将顶部位置（跟随页面向下的元素）更改为包含 div 的 scrollTop。

问题是，有时元素似乎会闪现然后又回到正确的位置。

我认为这与滚动事件没有触发每个滚动的像素有关，但我不确定。

我在 jsfiddle 上有一个非常简单的示例，因此您可以看到问题的实际效果：http: //jsfiddle.net/DYqqA/34/

JS： 

jQuery('#pageWrap').scroll(function(){
    jQuery('#follow').css({
        top: jQuery(this).scrollTop() + 20
    });
});
jQuery('.move').click(function(){
    jQuery('#pageWrap').animate({
        scrollTop: jQuery('.page').height() * jQuery('.page').length
    }, 4000); 
});

HTML：

<div id="scroll">
    <a href="#" class="move">Move</a>
    <div id="pageWrap">
        <div id="follow"></div>
        <div class="page"></div>
        <div class="page"></div>
        <div class="page"></div>
        <div class="page"></div>
        <div class="page"></div>
        <div class="page"></div>
        <div class="page"></div>
        <div class="page"></div>
        <div class="page"></div>
        <div class="page"></div>
        <div class="page"></div>
        <div class="page"></div>
        <div class="page"></div>
        <div class="page"></div>
    </div>
</div>
4

3 回答 3

2

您可以使用position:fixedwith pointer-eventsset to none：

http://jsfiddle.net/DYqqA/42/

jQuery('#follow').css('top',$('#scroll').offset().top+20+'px');
jQuery('.move').click(function(){
    jQuery('#pageWrap').animate({
        scrollTop: jQuery('.page').height() * jQuery('.page').length
    }, 4000); 
});
于 2013-05-28T12:21:46.223 回答
0

我会做的有点不同，我会为图像使用固定位置，以及z-index在悬停在图像上时允许滚动。

演示

#scroll{
    ...
    z-index:1;
}
#scroll #pageWrap{
    ...
    z-index:0;
}
#scroll #follow{
    ...
    position: fixed;
    z-index:-1;
    ...
}
于 2013-05-28T12:16:30.123 回答
0

只是一个想法...

也许看看这个函数（所有赞成票的那个）如何延迟 .keyup() 处理程序直到用户停止输入？

我在所描述的上下文中使用了它，作为一种延迟 ajax 调用的方法，直到用户停止输入一两秒。这可以防止过多的服务器流量并显着降低浏览器的开销。

如果您将它与您的函数结合使用，您应该会发现图像可能会在用户滚动时从屏幕上消失一会儿，但是当用户停止滚动时它会赶上 - 您也可以使用令人满意的缓动效果来做到这一点。问题是，您将不得不与使用各种浏览器的人抗衡，虽然它在您可爱的快速处理器和最新浏览器上看起来不错，但在某些访问者身上可能仍然不稳定。

就像我说的......只是一个想法。

于 2013-05-28T12:17:55.370 回答