html自动跟随,jQuery 导航自动跟随滚动的实现代码

具体代码如下所示：

content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>

simpleNavFollowing

* {

margin: 0;

padding: 0;

}

html, body {

position: relative;

height: 100%;

}

#nav {

position: fixed;

top: 50%;

left: 20px;

margin-top: -140px;

display: inline-block;

vertical-align: middle;

}

#nav a{

display: block;

position: relative;

width: 98px;

height: 28px;

line-height: 28px;

text-align: center;

background-color: #eee;

color: #333;

border-left: 2px solid transparent;

}

#nav a:hover{

width: 98px;

border-left: 2px solid #4b59ff;

}

#nav a p{

position: relative;

z-index: 3;

}

#nav a.active{

background-color: #4b59ff;

color: #fff;

}

#main {

max-width: 1200px;

margin: 0 auto;

}

#main div {

height: 300px;

background-color: #efefef;

border-top: 1px solid #ccc;

}

#main div:nth-child(2n) {

background-color: #fafafa;

}

$(function () {

var nav = $("#nav");

var mainPage = $(".mainPage");

var mainTopArr = new Array();

for(var i=0;i

var top = mainPage.eq(i).offset().top;

mainTopArr.push(top);

}

$(window).scroll(function(){

var scrollTop = $(this).scrollTop();

var k;

for(var i=0;i

if(scrollTop>=mainTopArr[i]){

k=i;

}

}

nav.find("a").eq(k).addClass("active").siblings().removeClass("active");

});

nav.find("a[href^='#']").click(function(e){

e.preventDefault();

$('html, body').animate({scrollTop: $(this.hash).offset().top}, 400);

});

});

page1

page2

page3

page4

page5

page6

page7

page8

page9

page10

page1

page2

page3

page4

page5

page6

page7

page8

page9

page10

page11

总结

以上所述是小编给大家介绍的jQuery 导航自动跟随滚动的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！