本文目录一览：
类似百度百科右侧的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就可以实现，关键是判断容器的高度
