html中ul跟随盒子移动,当用户滑动页面时将跟随页面移动的导航栏固定在页面上方...

场景:

导航栏才开始是固定在页面的某一个区域,当用户向下滑动页面到一定的程度时,可将导航栏固定在页面的某一个位置.

实例:

oschina博客编辑界面的工具栏,当向下滑动页面时,工具栏将会被固定在页面最上方.(不知道有一个算不算小BUG,如果浏览器足够短,向下滑动,拉出编辑区域,工具栏任然还在.)

效果PC端:

效果移动端:

特点:

用jquery和普通的css代码控制衔接位置的属性,让过度看起来不是那么生硬

制作工艺:

1.首先是制作普通的导航栏,让导航栏镶嵌在页面的某一个位置:

这样↓,一个新鲜的导航栏就出炉了,这里使用的是bootstrap的导航栏.

• 个人简介
• 作品
• 个人学习

这里是座右铭和个人圆图片等内容

这里是座右铭和个人圆图片等内容

emmmm

emmmm.

2.使用js代码控制'#mynavbar'区域的显示:

↓,这群代码要放在 jquery的scroll事件当中,$(window).scroll(function(){  xxx... }); 比较简短的代码,同时考虑的移动端和PC端情况.

//导航栏的固定

if($(document).scrollTop() < 90){

$('#mynavbar').css({

"position":'relative',

'margin-left':'0px',

'margin-top':'0px'

});

$('#mottopal').css({

'margin-top':'0'

});

}else{

$('#mynavbar').css({

'z-index':'2',

"position":'fixed',

'margin-left':'0px',

'margin-top':'-90px',

'width':'100%'

});

//移动端和PC端需要分开适配,不然会出现僵硬效果

if(navigator.userAgent.match(/mobile/i)){

$('#mottopal').css({

'margin-top':'144px'

});

}else{

$('#mottopal').css({

'margin-top':'45px'

});

}

}