怎样用js实现吸顶条效果

2025-11-19 13:53:23

1、第一步：实现思路

1. div初始居普通文档流中

2. 给window添加scroll事件（可事件节流），获取div的offset的top值，滚动时scrollTop值和top比较，当到达top时给div添加一个fixed的class使其固定

3. 向上滚动时当到达div初始top时则删除fixed的class，此时div又回到普通文档流中

4. fixed样式非IE6浏览器使用position:fixed，IE6使用position:absolute和IE expression

2、第二步：编辑代码。

打开编辑器：输入代码，如下所示

<!doctype html>

<html>

<head>

<style>

* {

margin: 0;

padding: 0;

}

#xidTop {

width: 100%;

height: 50px;

background: skyblue;

}

</style>

window.onload = function() {

var oDiv = document.getElementById('xidTop');

var divT = oDiv.offsetTop;

//console.log(divT);

window.onscroll = function() {

// 获取当前页面的滚动条纵坐标位置（依次为火狐谷歌、safari、IE678）

var scrollT = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

if (scrollT >= divT) {

if (window.navigator.userAgent.indexOf('MSIE 6.0') != -1) {

// 兼容IE6代码

oDiv.style.position = 'absolute';

oDiv.style.top = scrollT + 'px';

oDiv.style.left = 0 + 'px';

} else {

// 正常浏览器代码

oDiv.style.position = 'fixed';

oDiv.style.top = 0;

oDiv.style.left = 0;

}

} else

oDiv.style.position = '';

}

</script>

</head>

<body>

<div>

上面<br>

<div id="xidTop">吸顶：主要实现当位置将要超过div初始top时，让其置顶。</div>

吸顶测试<br>

</div>

</body>

</html>

怎样用js实现吸顶条效果

3、第三步：测试。

打开浏览器--向下滚动鼠标或左键单击页面滚动条上下拖动--可以看到div在不会被隐藏。测试成功！

怎样用js实现吸顶条效果

4、第五步：总结。

实现思路的基本条件是：滚动条的滚动事件的监控，在辅以样式的控制使用定位来完成。

优化：可以使用jquery的滚动监听事件，jquery已经处理了浏览器兼容的问题，开发更加方便。

$(window).bind("scroll", function(){

//当滚动条滚动时

处理代码

});

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。