您的位置：首页 > Web前端 > JavaScript

js 实现标题模块置顶显示

2017-07-21 00:13 253 查看

实现的是当页面停留在某一模块的任一位置时，头部标题模块固定在顶部，置顶显示。

修改引入的jQuery文件，直接运行即可。此实现方法有点笨拙，以后想到更好的方式再优化吧^_^

实现效果：

代码如下：

<!DOCTYPE html>
<html>
<head>
<style>
.add-list{border:1px solid #e7e7e7;min-height: 500px; height: auto; font-family: "微软雅黑"}
.add-list dt{background:#f8fafc;border-bottom:1px solid #e7e7e7;font-size: 14px;color: #ff6666;height: 38px;line-height: 38px; }
.add-list dt em{font-size: 14px; font-weight: 800;font-style: normal;}
.add-line{height: 36px;line-height: 36px;padding: 15px 0; font-size: 12px;}
.red-block{margin:13px 4px 13px 20px;float: left;background:#f66;width: 2px;height: 12px;}
.baseinfo_fix {position: fixed;top: 0;background: #000;z-index: 6;}
.baseinfo_static {position: relative;}
.cf66{color: #ff6666;}
.fl{float: left;}
.mt20{margin-top: 20px;}
.pt0{padding-top: 0;}
</style>
<script type="text/javascript" src="./jquery-1.11.3.min.js"></script>
</head>
<body>
<dl class="add-list mt20" id="baseinfo1">
<dt>
<i class="red-block"></i>
<em class="cf66 fl">模块1</em>
</dt>
<dd>
<div class="add-line pt0" style="min-width:600px;">内容1</div>
</dd>
</dl>
<dl class="add-list mt20" id="baseinfo2">
<dt>
<i class="red-block"></i>
<em class="cf66 fl">模块2</em>
</dt>
<dd>
<div class="add-line pt0" style="min-width:600px;">内容2</div>
</dd>
</dl>
<dl class="add-list mt20" id="baseinfo3">
<dt>
<i class="red-block"></i>
<em class="cf66 fl">模块3</em>
</dt>
<dd>
<div class="add-line pt0" style="min-width:600px;">内容3</div>
</dd>
</dl>
<dl class="add-list mt20" id="baseinfo4">
<dt>
<i class="red-block"></i>
<em class="cf66 fl">模块4</em>
</dt>
<dd>
<div class="add-line pt0" style="min-width:600px;">内容4</div>
</dd>
</dl>
<script type="text/javascript">
var baseinfoList = [];
var baseinfoWidth = document.body.offsetWidth - 2;
var sw = document.body.offsetWidth;//获取浏览器屏幕宽度
window.onload = function(){
for(var i = 1; i <= 4; i++){
baseinfo = document.getElementById('baseinfo'+i);
baseinfoList[i] = [];
baseinfoList[i]['height'] = baseinfo.offsetHeight;
baseinfoList[i]['top'] = baseinfo.offsetTop;
}
}

//滚动滚动条时
window.onscroll = function(){
//获取滚动条高度
var s = document.body.scrollTop||document.documentElement.scrollTop;
for(var i = 1; i <= 4;i++){
if(s >= baseinfoList[i]['top'] && s < baseinfoList[i]['height']+baseinfoList[i]['top']-36){
//当前模块范围内
jQuery('#baseinfo'+i+' dt').width(baseinfoWidth);
jQuery('#baseinfo'+i+' dt').addClass('baseinfo_fix');
jQuery('#baseinfo'+i+' dt').removeClass('baseinfo_static');
break;
}else{
jQuery('#baseinfo'+i+' dt').removeClass('baseinfo_fix');
jQuery('#baseinfo'+i+' dt').addClass('baseinfo_static');
}
}
}

//改变窗口大小时
window.onresize = function(){
if(sw != document.body.offsetWidth){
window.baseinfoWidth = document.body.offsetWidth-2;
console.log(sw);
for(var i = 1; i <= 4;i++){
if(jQuery('#baseinfo'+i+' dt').hasClass('baseinfo_fix') || jQuery('#baseinfo'+i+' dt').hasClass('baseinfo_static')){
jQuery('#baseinfo'+i+' dt').width(baseinfoWidth);
}
}
}
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery

相关文章推荐

新的分享

章节导航