左侧导航固定实例

最新推荐文章于 2023-02-21 22:00:24 发布

前端心记

最新推荐文章于 2023-02-21 22:00:24 发布

阅读量229

点赞数

分类专栏：实例文章标签：实例

本文链接：https://blog.csdn.net/replace_object/article/details/102671567

版权

实例专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<title>无标题页</title>
</head>
<body style="width:900px; margin:0px auto; line-height:23px; padding:10px;">
<div>
<div style="float:left; width:120px; ">
<div>
滚动内容区域 
滚动内容区域 
滚动内容区域 
滚动内容区域 
</div>
<div id="div1" style="border:solid 1px gray; width:90px; padding:10px; background-color:#eff;">
fix内容区域 
fix内容区域 
fix内容区域 
fix内容区域 
fix内容区域 
fix内容区域 
fix内容区域 
fix内容区域 
fix内容区域 
fix内容区域 
fix内容区域 
</div>
</div>
<div style="float:right; width:750px; border:solid 1px gray; padding:10px;">
ssssssssssssssss 
ssssssssssssssss 
ssssssssssssssss 
ssssssssssssssss 
ssssssssssssssss 
ssssssssssssssss 
ssssssssssssssss 
ssssssssssssssss 
ssssssssssssssss 
ssssssssssssssss 
ssssssssssssssss 
ssssssssssssssss 
ssssssssssssssss 
ssssssssssssssss 
ssssssssssssssss 
ssssssssssssssss 
ssssssssssssssss 
ssssssssssssssss 
ssssssssssssssss 
ssssssssssssssss 
ssssssssssssssss 
ssssssssssssssss 
ssssssssssssssss 
ssssssssssssssss 
ssssssssssssssss 
ssssssssssssssss 
ssssssssssssssss 
ssssssssssssssss 
ssssssssssssssss 
ssssssssssssssss 
ssssssssssssssss 
ssssssssssssssss 
ssssssssssssssss 
ssssssssssssssss 
ssssssssssssssss 
ssssssssssssssss 
ssssssssssssssss 
ssssssssssssssss 
ssssssssssssssss 
ssssssssssssssss 
ssssssssssssssss 
ssssssssssssssss 
ssssssssssssssss 
ssssssssssssssss 
ssssssssssssssss 
ssssssssssssssss 
ssssssssssssssss 
ssssssssssssssss 
ssssssssssssssss 
ssssssssssssssss 
ssssssssssssssss 
ssssssssssssssss 
ssssssssssssssss 
ssssssssssssssss 
ssssssssssssssss 
</div>
</div>
<script type="text/javascript">
function htmlScroll()
{
 var top = document.body.scrollTop || document.documentElement.scrollTop;
 if(elFix.data_top < top)
 {
 elFix.style.position = 'fixed';
 elFix.style.top = 0;
 elFix.style.left = elFix.data_left;
 }
 else
 {
 elFix.style.position = 'static';
 }
}

function htmlPosition(obj)
{
   var o = obj;
   var t = o.offsetTop;
   var l = o.offsetLeft;
   while(o = o.offsetParent)
   {
       t += o.offsetTop;
       l += o.offsetLeft;
   }
   obj.data_top = t;
   obj.data_left = l;
}

var oldHtmlWidth = document.documentElement.offsetWidth;
window.onresize = function(){
   var newHtmlWidth = document.documentElement.offsetWidth;
   if(oldHtmlWidth == newHtmlWidth)
   {
       return;
   }
   oldHtmlWidth = newHtmlWidth;
   elFix.style.position = 'static';
   htmlPosition(elFix);
   htmlScroll();
}
window.onscroll = htmlScroll;

var elFix = document.getElementById('div1');
htmlPosition(elFix);

</script>
</body>
</html>