Javascript Sticky元素避免跳转

Question

当我向下滚动时，我试图修复一个元素。代码运行良好，但正如您在下面的链接中所看到的，当它即将到达顶部时，带有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;

我的铬控制台输出如下：

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

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

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

更新

在加载页面后，在铬控制台中执行fixmeTop = $('.pulsanti').offset().top;之后，我可以验证元素是否平滑地粘附在页面顶部。

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

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

您可以将变量声明保留在原始脚本中，或者删除它并在这里添加var。

另外，请记住，在加载页面上的所有内容之前，不会工作，并且当页面上的任何东西移动时，它都不会有效。页面大小调整，div重新排列。您必须为每个这样的事件添加侦听器，以相应地调整值。像这样的东西可能是有用的：

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

window.addEventListener("resize", updateFixmeTop);

编辑:将事件侦听器中的元素体更改为窗口

希望能帮上忙！

Update2

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

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

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

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

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

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

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