Javascript Sticky Element onscroll避免跳转

Question

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

这是代码

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; 后，我可以验证元素是否顺利地粘在页面顶部。

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

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

你可以保留原脚本中的变量声明，或者去掉它并在此处添加var。

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

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

window.addEventListener("resize", updateFixmeTop);

编辑：在事件侦听器

中将元素主体更改为 window

希望对您有所帮助！

更新2

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

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

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

并参考其位置而不是粘性元素

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

这样你将存储你希望元素停留的滚动位置，如果元素已经在顶部，它不会有所不同。

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

Javascript Sticky Element onscroll避免跳转

Javascript Sticky Element onscroll avoid jumping

javascript

fixed

onscroll