求百度百科右側底部js導航代碼,左側導航欄代碼

本文目錄一覽：

• 1、類似百度百科右側的js效果怎麼做
• 2、百百度百科右側導航滾動代碼
• 3、求百度百科右側底部js導航代碼？高分懸賞

類似百度百科右側的js效果怎麼做

使用scroll事件監聽，計算滾動位置，下面是思路，不一定運行正確，有什麼問題可以再交流，

假設頁面上有有幾個內容塊：

div id=”content1″

  h3家庭情況/h3

  div…/div

/div

div id=”content2″

  h3人物評價/h3

  div…/div

/div

div id=”content3″

  h3作品/h3

  div…/div

/div

控制邏輯：

var content1 = document.getElementById(‘content1’);

var content2 = document.getElementById(‘content2’);

var content3 = document.getElementById(‘content3’);

window.addEventListener(‘scroll’, function() {

  // 拿到滾動位置

  var scrollY = window.pageYOffset || window.scrollY || document.documentElement.scrollTop;

  // 計算懸浮層高亮

  if (content3.getBoundingClientRect().top  scrollY) {

    // 改變右側懸浮層高亮content3標題

  } else if (content2.getBoundingClientRect().top  scrollY) {

    // 改變右側懸浮層高亮content2標題

  } else if (content1.getBoundingClientRect().top  scrollY) {

    // 改變右側懸浮層高亮content1標題

  }

}, false);

百百度百科右側導航滾動代碼

function DirectoryNav($h,config){

this.opts = $.extend(true,{

scrollThreshold:0.5,    //滾動檢測閥值 0.5在瀏覽器窗口中間部位

scrollSpeed:700,        //滾動到指定位置的動畫時間

scrollTopBorder:500,    //滾動條距離頂部多少的時候顯示導航，如果為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();

this.setArr();

this.bindEvent();

},

make:function(){

//生成導航目錄結構,這是根據需求自己生成的。如果你直接在頁面中輸出一個結構那也挺好不用 搞js

$(“body”).append(‘div class=”directory-nav” id=”directoryNav”ul/ulspan class=”cur-tag”/spanspan class=”c-top”/spanspan class=”c-bottom”/spanspan 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.tagName.toLowerCase()==’h2′){

index1++;

if(index1%2==0) index2 = 0;

temp.push(‘li class=”l1″span class=”c-dot”/span’+index1+’. a class=”l1-text”‘+text+’/a/li’);

}else{

index2++;

temp.push(‘li class=”l2″‘+index1+’.’+index2+’ 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();

}

},

setArr:function(){

var This = this;

this.$h.each(function(){

var $this = $(this),

offT = Math.round($this.offset().top);

This.offArr.push(offT);

});

},

posTag:function(top){

this.$curTag.css({top:top+’px’});

},

ifPos:function(st){

var offArr = this.offArr;

//console.log(st);

var windowHeight = Math.round(this.$win.height() * this.opts.scrollThreshold);

for(var i=0;ioffArr.length;i++){

if((offArr[i] – windowHeight) st) {

var $curLi = this.$pageNavListLis.eq(i),

tagTop = $curLi.position().top;

$curLi.addClass(“cur”).siblings(“li”).removeClass(“cur”);

this.curIndex = i;

this.posTag(tagTop+this.$pageNavListLiH*0.5);

//this.curIndex = this.$pageNavListLis.filter(“.cur”).index();

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();

});

}

};

//實例化

var directoryNav = new DirectoryNav($(“h2,h3”),{

scrollTopBorder:0   //滾動條距離頂部多少的時候顯示導航，如果為0，則一直顯示

});

求百度百科右側底部js導航代碼？高分懸賞

這其實用animate()方法+css的margin-top或margin-bottom就可以實現，關鍵是判斷容器的高度