jQuery侧边栏固定

来源：互联网发布：里约热内卢知乎编辑：程序博客网时间：2024/05/17 08:39

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>#top_head {width: 100%;height: 253px;background: gray;}#middle_right_list {width: 70%;height: 1800px;background: #0000FF;float: left;}#middle_left {width: 30%;height: 300px;float: left;}#middle_left_list {width: 100%;height: 300px;background: #003580;background-image: url(../../CS/布局属性全接触/img/1.jpg);/*transition: top .03s ease-in;*/}#middle_content {position: relative;}#middle_content:after {content: '';display: block;clear: both;overflow: hidden;}#foot {width: 100%;height: 200px;background: #004099;}body,html{padding: 0;margin: 0;}</style><script>function getByID(idname) {var ob = document.getElementById(idname);return ob;}window.addEventListener('scroll', function() {//获取滚动高度var scrolHight = document.body.scrollTop;var middle_left = getByID('middle_left_list');var contentHeight = getByID('middle_right_list').offsetHeight - middle_left.offsetHeight;console.log(contentHeight);if (scrolHight > 253 && scrolHight < (contentHeight + 253)) {//改变CSSmiddle_left.style.position = 'absolute';middle_left.style.top = (scrolHight - 253) + 'px';middle_left.style.left = '0px';middle_left.style.width = '30%';} else if (scrolHight <= 253) {middle_left.style.position = 'static';middle_left.style.width = '100%';}})//window.onscroll = function() {////}</script></head><body><div class="container"><div id="top_head">头部</div><div id="middle_content"><div id="middle_left"><div id="middle_left_list">左菜单</div></div><div id="middle_right_list">课程列表</div></div><div id="foot">底部</div></div></body></html>

jQuery实现:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>#top_head {width: 100%;height: 253px;background: gray;}#middle_right_list {width: 70%;height: 1800px;background: #0000FF;float: left;}#middle_left {width: 30%;height: 300px;float: left;}#middle_left_list {width: 100%;height: 300px;background: #003580;background-image: url(../../CS/布局属性全接触/img/1.jpg);/*transition: top .03s ease-in;*/}#middle_content {position: relative;}#middle_content:after {content: '';display: block;clear: both;overflow: hidden;}#foot {width: 100%;height: 200px;background: #004099;}body,html {padding: 0;margin: 0;}</style><script src="../jquery-2.2.4.min.js"></script><script>$(window).scroll(function() {var scrollHeight = $(window).scrollTop();var topHeight = $('#top_head').height();var slideHeight = $('#middle_left').height();var contentHeight = $('#middle_content').height() - slideHeight;console.log(scrollHeight);console.log('max:'+ (contentHeight + topHeight));if(scrollHeight > contentHeight + topHeight) {scrollHeight = contentHeight + topHeight;}if (scrollHeight > topHeight && scrollHeight <= contentHeight + topHeight) {$('#middle_left_list').css({"position": "absolute","top": scrollHeight - topHeight + 'px',"left": 0,"width": '30%'});} else if (scrollHeight <= topHeight) {$('#middle_left_list').css({"position": "absolute","top": 0,"left": 0,"width": '30%'});}})</script></head><body><div class="container"><div id="top_head">头部</div><div id="middle_content"><div id="middle_left"><div id="middle_left_list">左菜单</div></div><div id="middle_right_list">课程列表</div></div><div id="foot">底部</div></div></body></html>

0 0