怎样用js实现吸顶条效果

来源：互联网 2023-03-16 19:13:13 206

js全名JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

工具/原料

电脑
前端编辑工具

方法/步骤

第一步：实现思路

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

第二步：编辑代码。

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

!doctype html>

html>

head>

meta charset="utf-8">

title>吸顶测试/title>

style>

* {

margin: 0;

padding: 0;

}

#xidTop {

width: 100%;

height: 50px;

background: skyblue;

}

/style>

script>

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实现吸顶条效果

第三步：测试。

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

怎样用js实现吸顶条效果

第五步：总结。

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

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

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

//当滚动条滚动时

处理代码

});

4该信息未经许可获取自百度经验

注意事项

如果使用jquery实现，注意引入jquery的有效性

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： JAVASCRIPT HTML CSS

上一篇：网页怎么设置一个网页下一篇：怎么让6个div分占两行一行三个

怎样用js实现吸顶条效果

工具/原料

方法/步骤

注意事项

热门文章

标签列表