今天做了個固定定位的效果。比如對導航需要進行固定定位效果：當沒有滾動到導航下面，導航正常顯示。當滾動到導航下面，導航就固定到頂部。

一、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:?0?auto;

}

img#menu.f{

position:?fixed;

left:?50%;

margin-left:?-602px;

top:?0;

}

$(function(){

//給瀏覽器加滾動條事件

$(window).scroll(function(){

//獲得已經滾動上去的高度???document頁面文檔區域??????window也可以

var?t?=?$(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');

}

})

})

??

????

總結

以上是生活随笔為你收集整理的html导航条置顶,jquery导航菜单栏固定悬浮顶部实现效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。