元素按Jquery滚动移动

Element move by Jquery scroll

本文关键字：移动 滚动 Jquery 元素      更新时间：2023-09-26

我遇到了通过滚动事件移动元素位置的问题。问题是：我正在向上滚动页面，并将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;
});

谢谢你的想法！

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

<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。

它并不完美，但给你。

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

相关文章：