700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > html导航条置顶 jquery导航菜单栏固定悬浮顶部实现效果

html导航条置顶 jquery导航菜单栏固定悬浮顶部实现效果

时间:2019-03-06 15:26:20

相关推荐

html导航条置顶 jquery导航菜单栏固定悬浮顶部实现效果

今天做了个固定定位的效果。比如对导航需要进行固定定位效果:当没有滚动到导航下面,导航正常显示。当滚动到导航下面,导航就固定到顶部。

一、css部分:

fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

二、这个效果使用了jquery的方法实现,具体思路为:

1、首先获得已经滚动上去的高度

2、让导航条固定定位 如果t>139加f这个Class,让它有定位

3、如果小于或等于139,取消f这个Classhtml>

*{

padding:0;

margin:0;

}

img{

display:block;

margin:0auto;

}

img#menu.f{

position:fixed;

left:50%;

margin-left:-602px;

top:0;

}

$(function(){

//给浏览器加滚动条事件

$(window).scroll(function(){

//获得已经滚动上去的高度document页面文档区域window也可以

vart=$(document).scrollTop();

document.title=t;

if(t>139){

//让导航条固定定位fixed:固定的向左留50%(一半的距离有居右的效果),然后这个图片是1204px宽度,图片在右,向左是负的()图片一半602px,达到居中效果

//$('#menu').css({'position':'fixed','top':'0','left':'50%','margin-left':'-602px'})

//让导航条固定定位如果t>139加f这个Class,让它有定位

$('#menu').addClass('f');

}else{

//如果小于或等于139,取消f这个Class

$('#menu').removeClass('f');

}

})

})

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。