Javascript Sticky Element onscroll 避免跳转

如何解决Javascript Sticky Element onscroll 避免跳转

当我向下滚动时，我正在尝试修复一个元素。代码运行良好，但正如您在下面的 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'
        });
    }

});

谢谢大家

解决方法

我认为问题在于在加载某些元素之前分配了 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 值以确保它始终指向正确的元素。