Javascript Sticky Element onscroll 避免跳转

Question

当我向下滚动时，我正在尝试修复一个元素。 代码运行良好，但正如您在下面的link 中看到的那样，带有 3 个黄色按钮的栏在即将到达顶部时会跳跃！ 似乎有一些模板 css 类导致了这个问题， 但我不知道是哪一个

这是代码

var fixmeTop = $('.pulsanti').offset().top;       

$(window).scroll(function() {                  

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

    if (currentScroll >= fixmeTop) {          
        $('.pulsanti').css({                      
            position: 'fixed',
            top: '0',
            zIndex: '1020'
        });
    } else {                                   
        $('.pulsanti').css({              
            position: 'relative'
        });
    }

});

谢谢大家

Answer 1

我认为问题是在加载某些元素之前分配了 fixmeTop：

var fixmeTop = $('.pulsanti').offset().top;

我的 chrome 控制台输出如下：

> fixmeTop 
< 2314.3374633789062
> $('.pulsanti').offset().top; 
< 3207.5623779296875

可以看到fixmeTop变量并不是真正的元素位置。

也许您需要在body.onload() 中分配它？

更新

页面加载完成后在chrome控制台中执行fixmeTop = $('.pulsanti').offset().top;后，可以验证元素是否顺利贴在页面顶部。

添加此代码片段将创建一个处理函数，以便在窗口的加载事件触发时调用。这将在所有内容（div、图像）加载后发生。这样 fixmeTop 将包含真正的元素位置。

window.onload = function () {
   fixmeTop = $('.pulsanti').offset().top;
}

您可以将变量声明保留在原始脚本中，也可以将其删除并在此处添加var。

另外，请记住，只有在页面上的所有内容都加载完毕后它才会起作用，并且当页面上的任何内容移动时它也将无效 - 例如。页面调整大小，div 重新排列。您必须为每个此类事件添加侦听器以相应地调整值。这样的东西可能有用：

function updateFixmeTop() {
    fixmeTop = $('.pulsanti').offset().top;
}

window.addEventListener("resize", updateFixmeTop);

编辑：在事件监听器中将元素主体更改为窗口

希望对你有帮助！

更新2

假设您添加了 resize 事件侦听器 的代码并滚动到元素应该停留在顶部的位置。如果您要调整窗口的大小，fixmeTop 将被分配一个与页面顶部的元素相对应的值，而不是原始元素位置。

要解决此问题，您可能需要添加一个没有任何边距或填充的虚拟元素：

<div id="elementJustBeforeFixmeTop"></div> <! -- dummy element -->
<div class="pulsanti"> <! -- sticky element -->
    ...
</div>

并且引用它的位置而不是粘性元素

fixmeTop = $('#elementJustBeforeFixmeTop').offset().top;

这样您将存储您希望元素粘贴的滚动位置，如果元素已经在顶部，则不会有所不同。

您可能想检查您的页面是否没有在其他地方更改其布局，并更新那里的 fixmeTop 值以确保它始终指向正确的元素。