首页 > 代码库 > 固定边栏——淘宝滚动效果
固定边栏——淘宝滚动效果
点击查看Demo
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style>*{margin:0; padding:0;}.main{overflow:hidden;}.fl{float:left;}.main .left{width:60%;/*height:4000px; */border-right:1px solid red; margin:0 10px 0 50px;}.main .right{width:30%;}</style></head><body> <div class="main"> <div class="left fl"> <div><img src=http://www.mamicode.com/"img/1.jpg"></div> <div><img src=http://www.mamicode.com/"img/2.jpg"></div> <div><img src=http://www.mamicode.com/"img/3.jpg"></div> <div><img src=http://www.mamicode.com/"img/4.jpg"></div> <div><img src=http://www.mamicode.com/"img/5.jpg"></div> <div><img src=http://www.mamicode.com/"img/1.jpg"></div> <div><img src=http://www.mamicode.com/"img/2.jpg"></div> <div><img src=http://www.mamicode.com/"img/3.jpg"></div> <div><img src=http://www.mamicode.com/"img/4.jpg"></div> <div><img src=http://www.mamicode.com/"img/5.jpg"></div> <div><img src=http://www.mamicode.com/"img/1.jpg"></div> <div><img src=http://www.mamicode.com/"img/2.jpg"></div> <div><img src=http://www.mamicode.com/"img/3.jpg"></div> <div><img src=http://www.mamicode.com/"img/4.jpg"></div> <div><img src=http://www.mamicode.com/"img/5.jpg"></div> <div><img src=http://www.mamicode.com/"img/1.jpg"></div> <div><img src=http://www.mamicode.com/"img/2.jpg"></div> <div><img src=http://www.mamicode.com/"img/3.jpg"></div> <div><img src=http://www.mamicode.com/"img/4.jpg"></div> <div><img src=http://www.mamicode.com/"img/5.jpg"></div> <div><img src=http://www.mamicode.com/"img/1.jpg"></div> <div><img src=http://www.mamicode.com/"img/2.jpg"></div> <div><img src=http://www.mamicode.com/"img/3.jpg"></div> <div><img src=http://www.mamicode.com/"img/4.jpg"></div> <div><img src=http://www.mamicode.com/"img/5.jpg"></div> <div><img src=http://www.mamicode.com/"img/1.jpg"></div> <div><img src=http://www.mamicode.com/"img/2.jpg"></div> <div><img src=http://www.mamicode.com/"img/3.jpg"></div> <div><img src=http://www.mamicode.com/"img/4.jpg"></div> <div><img src=http://www.mamicode.com/"img/5.jpg"></div> <div><img src=http://www.mamicode.com/"img/1.jpg"></div> <div><img src=http://www.mamicode.com/"img/2.jpg"></div> <div><img src=http://www.mamicode.com/"img/3.jpg"></div> <div><img src=http://www.mamicode.com/"img/4.jpg"></div> <div><img src=http://www.mamicode.com/"img/5.jpg"></div> <div><img src=http://www.mamicode.com/"img/1.jpg"></div> <div><img src=http://www.mamicode.com/"img/2.jpg"></div> <div><img src=http://www.mamicode.com/"img/3.jpg"></div> <div><img src=http://www.mamicode.com/"img/4.jpg"></div> <div><img src=http://www.mamicode.com/"img/5.jpg"></div> <div><img src=http://www.mamicode.com/"img/1.jpg"></div> <div><img src=http://www.mamicode.com/"img/2.jpg"></div> <div><img src=http://www.mamicode.com/"img/3.jpg"></div> <div><img src=http://www.mamicode.com/"img/4.jpg"></div> <div><img src=http://www.mamicode.com/"img/5.jpg"></div> <div><img src=http://www.mamicode.com/"img/1.jpg"></div> <div><img src=http://www.mamicode.com/"img/2.jpg"></div> <div><img src=http://www.mamicode.com/"img/3.jpg"></div> <div><img src=http://www.mamicode.com/"img/4.jpg"></div> <div><img src=http://www.mamicode.com/"img/5.jpg"></div> <div><img src=http://www.mamicode.com/"img/1.jpg"></div> <div><img src=http://www.mamicode.com/"img/2.jpg"></div> <div><img src=http://www.mamicode.com/"img/3.jpg"></div> <div><img src=http://www.mamicode.com/"img/4.jpg"></div> <div><img src=http://www.mamicode.com/"img/5.jpg"></div> </div> <div class="right fl" id="right"> <div><img src=http://www.mamicode.com/"img/6.jpg"></div> <div><img src=http://www.mamicode.com/"img/7.jpg"></div> <div><img src=http://www.mamicode.com/"img/8.jpg"></div> <div><img src=http://www.mamicode.com/"img/9.jpg"></div> <div><img src=http://www.mamicode.com/"img/5.jpg"></div> </div> </div><script type="text/javascript" src=http://www.mamicode.com/"http://code.jquery.com/jquery.js"></script><script>var jwindow = $(window);jwindow.scroll(function(){ var scrollHeight = jwindow.scrollTop(); var screenHeight = jwindow.height(); var sideHeight = $("#right").height(); if(scrollHeight + screenHeight > sideHeight){ $("#right").css({"position":"fixed","top":-(sideHeight-screenHeight),"right":0}); } else{ $("#right").css({"position":"static"}); }})window.onload = function(){ jwindow.trigger(‘scroll‘);}window.onresize = function(){ jwindow.trigger(‘scroll‘);}</script></body></html>
固定边栏——淘宝滚动效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。