HTML 实现左侧内容可滚动，右侧列表固定布局
⼀、前⾔：最近在项⽬中，遇到⼀个页⾯布局问题，说是布局，其实就是实现⼀个新闻页⾯的交互问题；功能⽐较常见，就是左侧的内容部分可以滚动，右侧的列表固定定位。这个功能⽐较常见，⽬前已实现，就是布局+JS配合实现该效果；先上图，⼤概就是下图右侧列表随滚动条固定在右侧，左侧可以滚动的效果，当滚动条接近底部时，为了使右侧列表不覆盖底部，需要⽤js处理，设置右侧列表的bottom值，
具体请看代码。
⼆， 代码部分，由于是公司项⽬，没有把源代码拿过来，在这⾥我写了⼀个demo，来测试该功能，页⾯结构是⼀样的。html 结构
⼩节：关于htmL页⾯结构，就是头部、底部、内容部分，结构⽐较清晰；我们的内容部分的左侧是class类为cont-left的div元素，右侧是class类为list-right的div元素；我们需要固定的就是list-right的div元素。
css 样式
<section class ="sec-wrapper">
<header class ="head-top">页⾯头部</header>
<section class ="main-section">
<div  class ="div-wrapper clearfix">
<div  class ="cont-left">
<div  class ="cont-item"></div >
<div  class ="cont-item"></div >
<div  class ="cont-item"></div >
<div  class ="cont-item"></div >
<div  class ="cont-item"></div >
<div  class ="cont-item"></div >
<div  class ="cont-item"></div >
<div  class ="cont-item"></div >
</div >
<div  class ="list-right">
<div  class ="box-fixed">新闻列表</div >
</div >
</div >
</section>
</section>
<footer class ="foot">页⾯底部</footer>
<style  type ="text/css">
html ,body {
height:100%;
}
html,body,header,footer,div,section{            padding:0;
margin:0;
}
.
clearfix:after{
content:'';
display:block;
clear:both;
height:0;html滚动效果代码
visibility:hidden;
}
.clearfix{
zoom:1;
}
.sec-wrapper{
min-height:100%;
}
.head-top{
width:100%;
height:100px;
line-height:100px;
text-align:center;
font-size:16px;
color:#fff;
background:#E74445;
}
.
main-section{
padding-bottom:100px;
margin:20px auto;
}
.foot{
width:100%;
height:100px;
line-height:100px;
text-align:center;
font-size:16px;
color:#fff;
background:#528FEA;
margin-top:-100px;
}
.div-wrapper{
width:1200px;
margin:0 auto;
background:#F4F6F9;
position:relative;
}
.cont-left{
width:900px;
float:left;
margin-right:10px;
}
.list-right{
float:left;
}
.cont-item{
width:100%;
height:200px;
background:tan;
margin-top:10px;
}
.box-fixed{
width:290px;
padding-top:20px;
background-color:#89A1C5;
position:relative;
top:0px;
text-align:center;
color:#fff;
}
.tab_fix_bottom {
position: absolute;
bottom: 0px;
top: auto;
}
.tab_fix{
position:fixed;
}
</style>
⼩节：关于css样式设置，是有⼀定的技巧的，对于内容部分实现左右两栏布局，⽅式有多种，这⾥需要⽤到浮动，这样我们就不⽤再设置left-right容器的left值，省去很多⿇烦，然后给内容的⽗容器设置position：relative; 滚动到⼀定⾼度时，我们给box-fixed容器添加
tab_fix类固定，当滚动条接近底部时，为了不让固定的列表容器覆盖底部，可以使⽤绝对定位，设置b
ottom值，就是添加tab_fix_bottom 类。
js部分
<script src="cdn.static.runoob/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var fheight = $('.foot').height() + 30; // 获取底部及底部上⽅边距的总⾼度
var boxfixed = $('.box-fixed');  // 获取固定容器的jquery对象
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();  // 获取滚动条滚动的⾼度
var contLeftTop = $('.cont-left').offset().top+20; // 右侧列表相对于⽂档的⾼度
var scrollBottom = $(document).height() - $(window).scrollTop() - boxfixed.height();
if (scrollTop >= contLeftTop) {
if (scrollBottom > fheight) {  // 滚动条距离底部的距离⼤于fheight，添加tab_fix类，否则添加tab_fix_bottom类
} else {
}
} else if (scrollTop < contLeftTop) {
}
});
});
</script>
三、总结：功能很常见，主要⽬的是做个笔记。当然，相信实现⽅法不⽌⼀种，如果⼤家遇到更好的⽅法，可以⼀起学习。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。