我正在寻找一个用于粘性标题的 Javascript/jQuery 插件,它不会将元素的样式切换到固定位置。通常,我正在使用这个 http://stickyjs.com/而且效果很好。
我正在开发一个带有 jQuery 动画的网站,我的一个 div 有一个宽度为 100% 的粘性标题。但是,当我将其移动到左侧(例如)时, width:100% 现在基于窗口的宽度而不是他的容器。
那么,是否有一个现有的插件可以做与其他插件相同的事情,但保持position:relative并计算滚动顶部以应用为我的粘性标题的边距顶部?
最佳答案
编辑 2021
我下面的答案已经很旧了。我不建议再为此使用任何 JS 代码,而只需使用带有 position: Sticky;
的 CSS,这更容易实现,而且性能/更流畅(注意:Internet Explorer 不支持支持位置:粘性;
)。
原始答案
所以,我解决了我的问题!这是我的 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 位置 : fixed,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21006140/