最后是JS脚本:[我一般都放在 /body 之前] XHTML <script> jQuery(document).ready(function($) { try{ var f1 = $('.j_FloorItem[data-slide="1"]').offset().top; var fs = $('.navigation').children().size(); var fss = new Array(); for (i = 0; i < fs; i++) { j = i + 1; fss[i] = $('.j_FloorItem[data-slide="' + j + '"]').offset().top; } $(window).scroll(function(){ var currentTOP = $(window).scrollTop(); if(currentTOP>f1-30){ $("#nav").show(); }else{ $("#nav").hide(); } if (currentTOP <= f1) { $('.navigation li').removeClass('current'); $('.navigation li[data-slide="1"]').addClass('current'); return; }else{ changefl(getFloor(currentTOP)); } }); function getFloor(fh){ if(fs==0||fh<=f1){ return 1; } if(fh>=fss[fs-1]){ return fs; } for (k=0; k<fs;k++) { if(fh>fss[k]&&fh<fss[k+1]){ return k+1; } } } function changefl(fno){ $('.navigation li').removeClass('current'); $('.navigation li[data-slide="'+fno+'"]').addClass('current'); } }catch(e){ console.log(e); } }); function gotop() { $('body,html').animate({ scrollTop : 0 }, 800); } function gotofloor(thiz) { $("li[class='current']").attr('class', ''); $(thiz).attr("class", "current"); dataslide = $(thiz).attr('data-slide'); var pos = $('.j_FloorItem[data-slide="' + dataslide + '"]').offset().top;// 获取该点到头部的距离 $("html,body").animate({ scrollTop : pos },300); } </script> 至于 css 样式不赘述,另外代码不可重用,需要根据自己的实际情况 (责任编辑:好模板) |