这网站中左侧浮动固定列表效果如何做出来？
0
所有回答(3)
0
看了下效果，如果是我来做的话，我会根据滚动条滚动的距离，根据每个内容块的高度，就能计算出，当前用户浏览内容到哪里了，也就能选中对应的左侧导航块儿
你恐怕还要判断分辩率吧。否则会有错位现象...................
@新阿伦: 这里高度和分辨率没有关系
@新阿伦
李宝亨说的没错，高度都是动态计算的
@袁家小黑球: 难道就没有人给出点简单示意代码吗？
@李宝亨:
发现百度百科也有这效果
http://baike.baidu.com/subview/156202/8410063.htm?fr=aladdin#3_4
1
1 <html> 2 <head> 3 <style type="text/css"> 4 html,body,div,*{margin: 0px;padding: 0px;} 5 .nav{ 6 top:0px; 7 left: 0px; 8 width: 50px; 9 height: 275px; 10 padding: 2px; 11 position:fixed; 12 background-color: #000; 13 } 14 .nav li{ 15 position: absolute; 16 margin-bottom: 5px; 17 width: 50px; 18 height: 30px; 19 line-height: 30px; 20 text-align: center; 21 color: #fff; 22 cursor: pointer; 23 background-color: #ccc; 24 } 25 26 .nav .cur{ 27 width: 100px; 28 background-color: red; 29 30 } 31 .w{ 32 margin-left: 50px; 33 width: 800px; 34 height:200px; 35 text-align:center; 36 font-weight: bold; 37 } 38 #w1{ 39 background-color:#ccc; 40 } 41 #w2{background-color:red;} 42 #w3{background-color:blue;} 43 #w4{background-color:green;} 44 #w5{background-color:black;} 45 #w6{background-color:yellow;} 46 #w7{background-color:aqua;} 47 #w8{background-color:pink;} 48 </style> 49 <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 50 <script type="text/javascript"> 51 $(function() { 52 $("li").each(function(index, li) { 53 $(li).css("top",35*index); 54 }); 55 $(window).scroll(function() { 56 var sTop = $(this).scrollTop(); 57 var $divW = $(".w"); 58 $.each($divW,function(i,item){ 59 var temp = 35*i; 60 var itemTop = $(item).offset().top; 61 if (sTop>=(itemTop-temp)) { 62 $('.cur').removeClass('cur'); 63 $("li").eq($(item).index()).addClass('cur'); 64 }; 65 66 }) 67 }); 68 69 $(".nav").find("li").click(function() { 70 var $this = $(this); 71 var $w = $(".w").eq($this.index()); 72 var wTop = $w.offset().top; 73 var navTop = this.offsetTop; 74 $("html,body").animate({ 75 "scrollTop": wTop-navTop 76 }, 1000); 77 }); 78 79 }); 80 </script> 81 </head> 82 <body> 83 <ul class="nav"> 84 <li>1</li> 85 <li>2</li> 86 <li>3</li> 87 <li>4</li> 88 <li>5</li> 89 <li>6</li> 90 <li>7</li> 91 <li>8</li> 92 </ul> 93 <div class="main"> 94 <div id="w1" class="w">1</div> 95 <div id="w2" class="w">2</div> 96 <div id="w3" class="w">3</div> 97 <div id="w4" class="w">4</div> 98 <div id="w5" class="w">5</div> 99 <div id="w6" class="w">6</div> 100 <div id="w7" class="w">7</div> 101 <div id="w8" class="w">8</div> 102 </div> 103 </body> 104 </html>
简单模仿，要想做到http://price.pcauto.com.cn/sg4611/config.html这个中的效果还得继续努力中
0
设置固定位置将元素设置为 position:fixed; 设置好top,left这样就固定好位置了。
