不使用 CSS 位置的 Javascript / jQuery 粘性：已修复

Posted 2023-03-31

【中文标题】不使用 CSS 位置的 Javascript / jQuery 粘性：已修复

【英文标题】：Javascript / jQuery sticky without using css position: fixed

【发布时间】：2014-01-08 20:45:38

【问题描述】：

我正在寻找一个用于粘性标题的 javascript/jQuery 插件，它不会将元素的样式切换到固定位置。通常，我正在使用这个http://stickyjs.com/，它工作正常。

我正在开发一个带有 jQ​​uery 动画的网站，我的一个 div 有一个宽度为 100% 的粘性标题。但是当我将它向左移动时（例如），width:100% 现在基于窗口的宽度而不是他的容器。

那么，是否有一个现有的插件与其他插件做同样的事情但保持位置：相对并计算滚动顶部以作为我的粘性标题的边距顶部？

【问题讨论】：

为什么不想使用position: fixed？另外，如果您知道解决方案，您可以尝试自己编写解决方案。

因为我的标题在另一个 div 中的宽度：100% 小于窗口的宽度。当 div 切换到 position: fixed 时，它会变大（宽度从同一点开始，一直到窗口边缘）

然后将 100% 更改为 95% 或其他内容，请发布一些代码和/或小提琴。

顺便说一句，尽量不要依赖jQuery插件；很容易依赖它们而不是自己编写代码。

【参考方案1】：

编辑 2021

我在下面的答案已经很老了。我不建议再为此使用任何 JS 代码，而只需将 CSS 与 position: sticky; 一起使用，这更容易实现，但性能/流畅度也更高（注意：Internet Explorer 不支持 position: sticky;）。

原答案

所以，我解决了我的问题！这是我的 JavaScript 代码：

您必须将 top:0px 设置为默认值

function relative_sticky(id, topSpacing)

if(!topSpacing) var topSpacing = 0; 

var el_top = parseFloat(document.getElementById(id).getBoundingClientRect().top);
    el_top = el_top - parseFloat(document.getElementById(id).style.top);
    el_top = el_top * (-1);
    el_top = el_top + topSpacing;

    if(el_top > 0)
    document.getElementById(id).style.top = el_top + "px";
     else
    document.getElementById(id).style.top = "0px";
    


window.onscroll = function()

    relative_sticky("your_element_id", 10);

在IE中不是很流畅，所以我加了一个延迟：

var delay = (function()
  var timer = 0;
  return function(callback, ms)
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
  ;
)();

window.onscroll = function()
    
    if(BrowserDetect.browser == "Explorer" || BrowserDetect.browser == "Mozilla")
    // or your own way to detect browser
    
        delay(function()
        relative_sticky("admin_users_head", 31);
        , 200);
    
    else
    relative_sticky("admin_users_head", 31);
    

【讨论】：

这是旧的，但你应该考虑使用 requestAnimationFrame 来获得更流畅的动画

另一种方法可能是将transform: translateX(0) 添加到我的容器中，这将使我的固定位置子项计算其相对于容器而不是视口的宽度。