不使用CSS位置的Javascript / jQuery粘性：固定

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

我正在使用jQuery动画制作网站,而我的一个div的标题页宽度为100％.但是,当我将其向左移动(例如)时,width：100％现在基于窗口的宽度而不是其容器.

因此,是否有一个现有的插件,其功能与其他插件相同,但保持位置：相对并计算scrollTop用作我的粘性标头的页边距？

解决方法:

所以,我解决了我的问题！这是我的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);
    }
}

标签：javascript,jquery,css-position,sticky
来源： https://codeday.me/bug/20191009/1882753.html