菜單表 javascript改變position值實現(xiàn)菜單滾動至頂部后固定?
javascript改變position值實現(xiàn)菜單滾動至頂部后固定?Code:·$(function(){·//獲取要定位的元素與瀏覽器頂部的距離?!ar navh=$(“)。導(dǎo)航“)。偏移()。頂
javascript改變position值實現(xiàn)菜單滾動至頂部后固定?
Code:·$(function(){·//獲取要定位的元素與瀏覽器頂部的距離?!ar navh=$(“)。導(dǎo)航“)。偏移()。頂部·//滾動條事件·$(窗口)。Scroll(function(){·//獲取滾動條的滑動距離。·var scroh=$(這個)。Scrolltop()·//如果滾動條的滑動距離大于或等于定位元素與瀏覽器頂部之間的距離,則滾動條的滑動距離是固定的;否則滾動條的滑動距離不是固定的。如果(scroh>=navh){·$(”。導(dǎo)航“)。CSS({“position”:“fixed”,“top”:0})·}else If(scroh<navh){·$()。導(dǎo)航“)。CSS({“position”:“static”})·}·}·}
判斷瀏覽器的滾動高度和要固定在文檔頂部的元素與文檔頂部之間的距離,然后收聽滾動事件得到滾動高度,判斷滾動高度和元素與頂部之間的距離,如果它們相等,就固定元素。那很好。寫代碼太麻煩了,原則是這樣的,你試試看。另外,要避免元素固定定位,因為突然固定,不考慮頁面高度會跳轉(zhuǎn)的問題。在固定位置的同時,可以將margin top或padding top添加到以下元素,該元素等于固定位置元素的高度。再說一句。個人感覺。網(wǎng)站特效就是用JS來控制CSS,從而得到一些僅僅用CSS無法達到的效果。因此,面對類似的效果,你可以試著想一想自己的想法,寫出來,然后根據(jù)想法找到需要了解的知識點,然后效果就會慢慢出來