div跟随固定在浏览器左边，上下不浮动，左右可跟随主体浮动资源-CSDN下载

共3个文件

js：2个

html：1个

5星 · 超过95%的资源需积分: 29 15 浏览量 2013-06-19 16:52:36 上传评论 2 收藏 32KB RAR 举报

在网页设计中，"div跟随固定在浏览器左边，上下不浮动，左右可跟随主体浮动"是一种常见的布局技巧，主要用于创建侧边栏或者导航菜单。这种布局模式可以使元素在页面滚动时始终保持在用户视野的左侧，提供持续的导航或信息展示。下面我们将详细探讨这个知识点。 `div`是HTML中的一个常用容器元素，用于组织和布局网页内容。要实现这样的效果，我们需要通过CSS（层叠样式表）来控制`div`的行为。 1. **定位方式**：要使`div`固定在浏览器的左边，我们需要使用CSS的`position`属性。将其设置为`fixed`，这样元素就会相对于浏览器窗口定位，而不是相对于其父元素。同时，为了保持在屏幕左侧，可以设置`left: 0;`。 ```css div { position: fixed; left: 0; } ``` 2. **固定高度与宽度**：为了让`div`在上下拉动滚动条时保持固定，我们需要设定它的高度，确保它能覆盖整个页面或指定区域。同样，设置适当的宽度以适应内容。 ```css div { width: 200px; /* 自定义宽度 */ height: 100vh; /* 使用视口高度，确保始终填满屏幕 */ } ``` 3. **横向滚动跟随**：当页面有横向滚动条时，我们希望`div`能跟随主体内容移动。这可以通过监听滚动事件并调整`div`的`left`值来实现。可以使用JavaScript或者jQuery来实现这一功能： ```javascript window.addEventListener('scroll', function() { var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft; document.querySelector('div').style.left = -scrollLeft + 'px'; }); ``` 这段代码监听了窗口的滚动事件，计算当前的水平滚动位置，并将这个值赋给`div`的`left`属性，使得`div`的位置能随横向滚动而变化。 4. **防止浮动**：在描述中提到"上下不浮动"，这可能是指`div`在垂直方向上保持固定，不随页面内容浮动。我们已经在`position: fixed`下实现了这一点，因为固定定位的元素不会受其他浮动元素的影响。要实现这个效果，我们需要结合HTML结构、CSS样式以及可能的JavaScript/jQuery交互。通过正确地设置`div`的`position`、`left`、`width`、`height`等属性，以及监听滚动事件来更新`left`值，我们可以创建出一个固定在浏览器左侧且随横向滚动而移动的`div`元素。这样的设计在很多网站的侧边栏导航或滚动广告中都能看到，既实用又具有良好的用户体验。

资源推荐

资源详情

资源评论

收起资源包目录

div跟随固定在浏览器左边，上下不浮动，左右可跟随主体浮动.rar （3个子文件）

div跟随固定在浏览器左边，上下不浮动，左右可跟随主体浮动

jquery.js 94KB

jquery.floatDiv.js 4KB

a.html 9KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link href="css/index2.css" type="text/css" rel="stylesheet"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.floatDiv.js"></script> <script type="text/javascript"> $(function(){ }); </script> <style type="text/css"> html{_background-image:url(about:blank);_background-attachment:fixed;/*针对ie6，解决窗口滚动时的抖动*/} body{margin:0;padding:0;} .box-wrap{position:absolute;width:1146px; margin:0px auto; height:5000px;background:#FFFFF0;} .pos-id{width:200px;height:900px;line-height:200px;background:#CCCCCC; /*针对ie6*/ _position:absolute; _bottom:auto; _top:expression(eval(document.documentElement.scrollTop+(document.documentElement.clientHeight-this.offsetHeight)/2- (parseInt(this.currentStyle.marginTop)||0)-(parseInt(this.currentStyle.marginBottom)||0))); /*其中的_top为浏览器的垂直居中线上,left在js定义中*/ } .pos-id a{color:#FFF;font-size:12px;} </style> </head> <body onresize="sets('pos-id',1140,-1343);"> <div class="bo" >    <div id="box-wrapp" class="box-wrap"> a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br>a</br> <div id="a"> asfd </div> </div>  </div>  <div id="pos-id" class="pos-id"> <div class="left1"> </br></br> <h1>一个名字 </h1> <h4>@Eeglish</h4> </br></br></br> <div class="innerDiv1">注册  <a id="logina" href="javascript:void(0)">登录</a></div> </div> </br> <hr style="width:150px"/> <div class="left2"> <span>首页</span></br></br> <span>专属定制</span></br></br> <span>精品推荐</span></br></br> <span>设计师</span></br></br> <span>品牌工作室</span></br></br> <span>关于我们</span></br></br> </div> </br></br> <hr style="width:150px"/> <div class="di"> <div > © 2012 TripleSky.All</br> Rights Reserved</div> </div> </div>  <script language="javascript"> window.onload = function(){ /* ---------------------------------- 定义一个浏览器左右浮动元素相对于页面主体宽度的位置的函数 ---------------------------------- */ function setScrollDivPos(elemId_str,main_width,m_left){ //自定义一个获取元素的函数 $ = function(id){return document.getElementById(id);}; //获取浏览器在标准模式和混杂模式的视口大小 var c_width = document.documentElement.clientWidth || document.body.clientWidth; var c_height = document.documentElement.clientHeight || document.body.clientHeight; if(c_width>=1545){ $("box-wrapp").style.cssText = 'left:0;'; //获取浏览器滚动时顶部被隐藏的像素大小 //var s_top = document.documentElement.scrollTop || document.body.scrollTop; //获取浏览器视口宽度减去页面主题宽度的一半 var half_width = (c_width - main_width)/2; $("box-wrapp").style.cssText="position:sbsolute;top:0px;left:"+half_width+"px;"; var x=document.getElementById("box-wrapp").style.left; //获取浏览器视口高度的一半 var half_height = c_height/2; //获取元素的高度 var elem_height = $(elemId_str).offsetHeight; //获取元素相对于页面主体的(左、上)相对位置 var pos_left = main_width + half_width + m_left + "px"; var pos_top = (c_height - elem_height)/2 + "px"; //获取浏览器顶部的滚动大小 //var s_top = document.documentElement.scrollTop || document.body.scrollTop; //对元素进行定位布局 if(window.XMLHttpRequest){ $(elemId_str).style.cssText = 'position:fixed;top:' + pos_top + ';left:' + pos_left + ';'; }else{ $(elemId_str).style.cssText = ';left:' + pos_left + ';'; } }else{ $("box-wrapp").style.cssText = 'margin:0px 0px 0px 200px;'; //获取浏览器滚动时顶部被隐藏的像素大小 //var s_top = document.documentElement.scrollTop || document.body.scrollTop; //获取浏览器视口宽度减去页面主题宽度的一半 var half_width = (c_width - main_width)/2; $("box-wrapp").style.cssText="position:sbsolute;top:0px;left:"+200+"px;"; //获取浏览器视口高度的一半 var half_height = c_height/2; //获取元素的高度 var elem_height = $(elemId_str).offsetHeight; //获取元素相对于页面主体的(左、上)相对位置 var pos_left = main_width + half_width + -1143 + "px"; var pos_top = (c_height - elem_height)/2 + "px"; //获取浏览器顶部的滚动大小 //var s_top = document.documentElement.scrollTop || document.body.scrollTop; //对元素进行定位布局 if(window.XMLHttpRequest){ var x=document.getElementById("box-wrapp").style.left; var l=x; $(elemId_str).style.cssText = 'position:fixed;top:0px;left:' + l+ 'px;'; }else{ $(elemId_str).style.cssText = ';left:' + l + 'px;'; } } } //定义id为pos-id的元素在页面主题宽度为990px的左侧 setScrollDivPos("pos-id",1140,-1343); //定义id为pos-id的元素在页面主题宽度为990px的右侧 //setScrollDivPos("pos-id",1140,0); } function sets(elemId_str,main_width,m_left){ //自定义一个获取元素的函数 $ = function(id){return document.getElementById(id);}; //获取浏览器在标准模式和混杂模式的视口大小 var c_width = document.documentElement.clientWidth || document.body.clientWidth; var c_height = document.documentElement.clientHeight || document.body.clientHeight; if(c_width>=1545){ $("box-wrapp").style.cssText = 'left:0;'; //获取浏览器滚动时顶部被隐藏的像素大小 //var s_top = document.documentElement.scrollTop || document.body.scrollTop; //获取浏览器视口宽度减去页面主题宽度的一半 var half_width = (c_width - main_width)/2; $("box-wrapp").style.cssText="position:sbsolute;top:0px;left:"+half_width+"px;"; //获取浏览器视口高度的一半 var half_height = c_height/2; //获取元素的高度 var elem_height = $(elemId_str).offsetHeight; //获取元素相对于页面主体的(左、上)相对位置 var pos_left = main_width + half_width + m_left + "px"; var pos_top = (c_height - elem_height)/2 + "px"; //获取浏览器顶部的滚动大小 //var s_top = document.documentElement.scrollTop || document.body.scrollTop; //对元素进行定位布局 if(window.XMLHttpRequest){ $(elemId_str).style.cssText = 'position:fixed;top:' + pos_top + ';left:' +pos_left + ';'; }else{ $(elemId_str).style.cssText = ';left:' + pos_left + ';'; } }else{ $("box-wrapp").style.cssText = 'margin:0px 0px 0px 200px;'; //获取浏览器滚动时顶部被隐藏的像素大小 //var s_top = document.documentElement.scrollTop || document.body.scrollTop; //获取浏览器视口宽度减去页面主题宽度的一半 var half_width = (c_width

评论收藏

内容反馈