Javascript/jQuery 粘滞不使用 css 位置 : fixed

Question

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

我在一个使用 jQuery 动画的网站上工作，我的一个 div 有一个宽度为 100% 的粘性 header 。但是当我将它向左移动时(例如)，width:100% 现在基于窗口的宽度而不是他的容器。

那么，是否有一个现有的插件可以做与其他插件相同的事情，但保留 position: relative 并计算 scrollTop 以用作我的粘性标题的边距顶部？

Answer 1

编辑 2021

我下面的回答很老了。我不建议再为此使用任何 JS 代码，而是简单地使用带有 position: sticky; 的 CSS，这更容易实现，但也更高效/流畅(注意: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);
    }
}