html+css3+jquery左侧悬浮定位显示导航

1、新建html文档。

3、书写css代码。<style>* { margin: 0; padding: 0; list-style-type: none; }body { height: 4000px; background: #eee; }.lift-nav { position: fixed; top: 100px; left: 30px; display: none; }.lift-nav li { width: 30px; height: 30px; text-align: center; line-height: 30px; color: #fff; padding: 10px 10px; margin-bottom: 10px; background: skyblue; cursor: pointer; }.lift-nav li.current { background: tomato; }.t1, .t2, .t3, .t4, .t5, .t6 { width: 800px; height: 400px; text-align: center; line-height: 400px; background: skyblue; margin: 100px auto; font-size: 30px; color: #fff; }.t1 { margin-top: 200px; }.t2 { background: pink; }.t3 { background: tomato; }.t4 { background: grey; }.t5 { background: yellow; }.t6 { background: seagreen; }</style>

5、书写并添加<script src="js/LiftEffect.js"></script>代码。<script>function LiftEffect(json){var array=[];for(var i =0; i<json.target.length;i++){ var t = $(json.target[i]).offset().top; array.push(t);}function Selected(index){ $(json.control2).children().eq(index).addClass(json.current).siblings().removeClass(json.current);}$(window).on("scroll",Check);function Check(){ var wst = $(window).scrollTop(); if(wst >= $(json.target[0]).offset().top-100){ $(json.control1).fadeIn(500); }else{ $(json.control1).fadeOut(500); } var key =0; var flag = true; for(var i =0; i<array.length; i++){ key++; if(flag){ if(wst >= array[array.length-key]-300){ var index = array.length-key; flag = false; }else{ flag=true; } } } Selected(index);}$(json.control2).children().on("click",function(){ $(window).off("scroll"); var index = $(this).index(); Selected(index); var flag = true; for(var i =0; i<array.length; i++){ if(flag){ if(index == i){ $("html,body").stop().animate({ "scrollTop": array[i]-50 },500,function(){ $(window).on("scroll",Check); }); flag = false; }else{ flag=true; } } } });}</script>

7、查看效果。