|
|
Line 361: |
Line 361: |
| </div> | | </div> |
| </div> | | </div> |
− |
| |
− | <script>
| |
− | $(function() {
| |
− |
| |
− | function DirectoryNav($h,config){
| |
− | this.opts = $.extend(true,{
| |
− | scrollThreshold:0.5, //滚动检测阀值 0.5在浏览器窗口中间部位
| |
− | scrollSpeed:700, //滚动到指定位置的动画时间
| |
− | scrollTopBorder:400, //滚动条距离顶部多少的时候显示导航,如果为0,则一直显示
| |
− | easing: 'swing', //不解释
| |
− | delayDetection:200, //延时检测,避免滚动的时候检测过于频繁
| |
− | scrollChange:function(){}
| |
− | },config);
| |
− | this.$win = $(window);
| |
− | this.$h = $h;
| |
− | this.$pageNavList = "";
| |
− | this.$pageNavListLis ="";
| |
− | this.$curTag = "";
| |
− | this.$pageNavListLiH = "";
| |
− | this.offArr = [];
| |
− | this.curIndex = 0;
| |
− | this.scrollIng = false;
| |
− | this.init();
| |
− | }
| |
− |
| |
− | DirectoryNav.prototype = {
| |
− | init:function(){
| |
− | this.make();
| |
− | var Thisss = this;
| |
− | setInterval(function(){
| |
− | Thisss.offArr = [];
| |
− | Thisss.$h.each(function(){
| |
− | var $This = $(this),
| |
− | offT = Math.round($This.offset().top);
| |
− | Thisss.offArr.push(offT-200);
| |
− | });
| |
− | // alert(JSON.stringify(Thisss.offArr));
| |
− | },1000);
| |
− | this.bindEvent();
| |
− | },
| |
− | make:function(){
| |
− | $("body").append('<div class="directory-nav" id="directoryNav"><ul></ul><span class="cur-tag"></span><span class="c-top"></span><span class="c-bottom"></span><span class="line"></span></div>');
| |
− | var $hs = this.$h,
| |
− | $directoryNav = $("#directoryNav"),
| |
− | temp = [],
| |
− | index1 = 0,
| |
− | index2 = 0;
| |
− | $hs.each(function(index){
| |
− | var $this = $(this),
| |
− | text = $this.text();
| |
− | if(!$this.hasClass("h2_title")){
| |
− | index1++;
| |
− | if(index1%2==0) index2 = 0;
| |
− | temp.push('<li class="l1"><span class="c-dot"></span><a class="l1-text">'+text+'</a></li>');
| |
− | }else{
| |
− | index2++;
| |
− | temp.push('<li class="l2"><a class="l2-text">'+text+'</a></li>');
| |
− |
| |
− | }
| |
− | });
| |
− | $directoryNav.find("ul").html(temp.join(""));
| |
− |
| |
− | this.$pageNavList = $directoryNav;
| |
− | this.$pageNavListLis = this.$pageNavList.find("li");
| |
− | this.$curTag = this.$pageNavList.find(".cur-tag");
| |
− | this.$pageNavListLiH = this.$pageNavListLis.eq(0).height();
| |
− |
| |
− | if(!this.opts.scrollTopBorder){
| |
− | this.$pageNavList.show();
| |
− | }
| |
− | },
| |
− | posTag:function(top){
| |
− | this.$curTag.css({top:top+'px'});
| |
− | },
| |
− | ifPos:function(st){
| |
− | var offArr = this.offArr;
| |
− | var windowHeight = Math.round(this.$win.height());
| |
− | for(var i=0;i<offArr.length;i++){
| |
− | if((offArr[i] - windowHeight + 650) < st) {
| |
− | var $curLi = this.$pageNavListLis.eq(i),
| |
− | tagTop = $curLi.position().top;
| |
− | $curLi.addClass("cur").siblings("li").removeClass("cur");
| |
− | if($curLi.hasClass("l2")){
| |
− | this.$curTag.addClass("cur2");
| |
− | }else{
| |
− | this.$curTag.removeClass("cur2");
| |
− | }
| |
− | this.curIndex = i;
| |
− | this.posTag(tagTop-6);
| |
− | this.opts.scrollChange.call(this);
| |
− | }
| |
− | }
| |
− | },
| |
− | bindEvent:function(){
| |
− | var This = this,
| |
− | show = false,
| |
− | timer = 0;
| |
− | this.$win.on("scroll",function(){
| |
− | var $this = $(this);
| |
− | clearTimeout(timer);
| |
− | timer = setTimeout(function(){
| |
− | This.scrollIng = true;
| |
− | if($this.scrollTop()>This.opts.scrollTopBorder){
| |
− | if(!This.$pageNavListLiH) This.$pageNavListLiH = This.$pageNavListLis.eq(0).height();
| |
− | if(!show){
| |
− | This.$pageNavList.fadeIn();
| |
− | show = true;
| |
− | }
| |
− | This.ifPos( $(this).scrollTop() );
| |
− | }else{
| |
− | if(show){
| |
− | This.$pageNavList.fadeOut();
| |
− | show = false;
| |
− | }
| |
− | }
| |
− | },This.opts.delayDetection);
| |
− | });
| |
− |
| |
− | this.$pageNavList.on("click","li",function(){
| |
− | var $this = $(this),
| |
− | index = $this.index();
| |
− | This.scrollTo(This.offArr[index]);
| |
− | })
| |
− | },
| |
− | scrollTo: function(offset,callback) {
| |
− | var This = this;
| |
− | $('html,body').animate({
| |
− | scrollTop: offset
| |
− | }, this.opts.scrollSpeed, this.opts.easing, function(){
| |
− | This.scrollIng = false;
| |
− | // callback && this.tagName.toLowerCase()=='body' && callback();
| |
− | if(callback){
| |
− | if(this.tagName.toLowerCase()=='body'){
| |
− | callback();
| |
− | }
| |
− | }
| |
− | });
| |
− | }
| |
− | };
| |
− |
| |
− | var directoryNav = new DirectoryNav($(".h1_title,.h2_title"),{
| |
− | scrollTopBorder:400 //滚动条距离顶部多少的时候显示导航,如果为0,则一直显示
| |
− | });
| |
− | });
| |
− |
| |
− |
| |
− | </script>
| |