1

我遇到了滚动事件移动元素位置的问题。问题：我正在向上滚动页面并将 1px 附加到 css 顶部值（每次滚动）。在此之后，我将页面向下滚动，并从 css 顶部值中删除 1px。我认为它会回到原来的位置，但不是。这是我的代码：

var lastScroll = $(window).scrollTop();

$(window).scroll(function(env) {

 var scroll = $(this).scrollTop();

 if (scroll > lastScroll){
    console.log('Scroll down');
    $('#home>article').css({ 
      top: "+="+1+"px"
    });                                                 
 } else {
   console.log('Scroll up');
   $('#home>article').css({
      top: "-="+1+"px"
 });

lastScroll = scroll;

});

感谢所有的想法！

4

2 回答 2

1

希望这可能会有所帮助，这是我不久前使用的东西。我一直在使用的：

<script type="text/javascript">// <![CDATA[
$(window).scroll(function () {
            var ttop = $('.container').position().top;
            var hcltb = $('.container').height();
            var mtop = $(window).scrollTop();
            if (mtop > ttop) {
                if (mtop < (ttop + hcltb - 400)) {
                    $('.internal_prev').css('top', (mtop - ttop + 300));
                    $('.internal_next').css('top', (mtop - ttop + 300));
                    $('.internal_commands').css('top', (mtop - ttop + 300));
                }
            }
        });
// ]]></script>

这将导致 div class="container" 充当主容器。然后它将导致 internal_* 类在 div 内上下滚动，内部填充设置为 400。

它并不完美，但给你。

于 2013-08-07T13:07:54.843 回答
0

当滚动事件触发时，不能保证每滚动一个像素就会触发一次。它可能会在您一次滚动 10 像素和下一次滚动 2 像素后触发。您必须跟踪上次调用处理程序的 scrollTop 增量（更改）。

于 2013-08-07T13:00:36.510 回答