|
|
| 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>
| |
