DIV导航冻结

最新推荐文章于 2022-09-06 15:00:53 发布

龙井茶Sky

最新推荐文章于 2022-09-06 15:00:53 发布

阅读量1.1k

点赞数

分类专栏：前端 # JQuery # CSS 文章标签： div冻结

前端同时被 3 个专栏收录

22 篇文章 0 订阅

订阅专栏

JQuery

15 篇文章 0 订阅

订阅专栏

CSS

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滚动到顶部，锁定</title>
<style type="text/css">
.channelMove {
 overflow: hidden;
 position: fixed;
 top:0px;
 width: 300px;
 z-index: 200;
}
#channelHtml {

 display: block;
width:300px;
height:500px;
 margin-bottom: 10px;
border: #000000 solid 1px;
}

</style>
</head>
<body>
 
<div id="dMark" class="clear" style="visibility:hidden;margin-top:-1px;"></div>
<div id="channelHtml">

</div>
 
</body>

function addClass(o,cn){var re = new RegExp("(\\s*|^)"+cn+"\\b","g");o.className +=o.className?(re.test(o.className)?"":" "+ cn):cn}
function removeClass(o,cn){var re = new RegExp("(\\s*|^)"+cn+"\\b","g");var sName = o.className;o.className = sName.replace(re,"")}

window.οnscrοll=window.οnresize=function(){
//document.documentElement.scrollTop 获取当前页面的滚动条纵坐标位置
//document.body.scrollTop 网页被卷去的高
//document.documentElement.clientTop 返回文档或元素的厚度
//document.documentElement.getBoundingClientRect.top 获取页面元素的顶部位置
var scrTop = document.body.scrollTop;
var offTop = $$("dMark").getBoundingClientRect().top+scrTop-document.documentElement.clientTop;
scrTop>offTop?addClass($$("channelHtml"),"channelMove"):removeClass($$("channelHtml"),"channelMove");
}
})();
</script>

</html>

原文链接

http://www.cnblogs.com/shoupifeng/archive/2012/08/16/2641967.html

龙井茶Sky

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DIV导航冻结

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">滚动到顶部，锁定.channelMove { overflow: hidden; position: fixed; top:0px; width: 300px;
复制链接

扫一扫

专栏目录