php定位导航系统,jQuery实现定位导航位置详解

本文主要为大家详细介绍了基于jQuery实现定位导航位置效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

当滚动条滚动到内容区域的时候，侧边导航条定位到屏幕，不再动，并且点击导航条跳转到内容所在的位置；

*{

padding: 0;

margin: 0;

}

.left{

float: left;

padding: 0 0 328px 0;

}

.left p{

width: 800px;

height: 300px;

line-height: 300px;

text-align: center;

font-size: 30px;

background: gray;

margin: 10px 0;

}

.nav{

position: absolute;

right:20px;

top: 20px;

}

.nav p{

width: 100px;

height: 80px;

line-height: 80px;

text-align: center;

background: pink;

margin: 10px 0;

cursor: pointer;

}

.bottom{

overflow: hidden;

width: 100%;

position: relative;

}

Document

一

二

三

四

one

two

three

four

$(window).scroll(function(e){

console.log($(window).scrollTop());

if ($(window).scrollTop() >$('#one').offset().top) {

$('.nav').css({'position':'fixed'});

console.log('ss');

} else{

$('.nav').css({'position':'absolute'});

}

})

$('.nav p').click(function(){

var i = $('.navp').index(this);

var x = $('.leftp').eq(i).offset().top;

$('html, body').animate({scrollTop:x+'px'},500);

})

相关推荐：