js元素置頂懸浮

2021-08-20 21:16:10 字數 1138 閱讀 1399

先展示下,最簡短的jquery實現方式

// 獲取元素距頁面的高


var info_head_top = $("#info_head").offset().top;


// 監聽頁面滾動


$(document).scroll(function


() else


});
用js簡單實現乙個非常實用的小功能,元素置頂懸浮

即,當頁面滾動,元素到達瀏覽器頂部時,元素懸浮固定於頂部

展示一下具體效果

具體實現思路:

1.獲取元素距離頁面頂部的距離 = ele_top

2.監聽頁面滾動

3.當頁面滾動距離超過 ele_top

改變元素樣式,設為固定定位 「postion: fiexd」

4.當頁面滾動距離小於 ele_top

改回絕對定位

因為相對定位與固定定位,位置不同,所以把兩種情況的css封裝成兩個類

改變元素類名,就能完成效果

// 設定懸浮效果


// 獲取 ele_top


var info_head_top = $("#info_head").offset().top;


// 監聽頁面滾動


$(document).scroll(function


()});


$(


"#back").show(); // 開始佔位


$(


"#back").hide(); // 佔位結束
當scrtop>info_head_top == true 的一瞬間,因為有元素被浮起不佔位,後面的元素會彈上去,這時候,需要個佔位元素,阻止這種現象

佔位元素樣式與需要懸浮的元素完全一樣,加上」display: none」即可

彈出懸浮視窗並讓置頂程式

首先是主窗體部分，即要判斷窗體的狀態來決定是否顯示懸浮視窗。區域性成員宣告 private formwindowstate fwsprevious private frmtopmost mytopmost 主窗體的load事件 private void frmmain load object sen...

js的懸浮效果

js 部分 html html html html getsubstr username,10 html 愛好 userobj.hobby 簽名 userobj.recommend html html html divid html html css backgroundimage none els...

置頂 JS 逆向爬蟲

第一篇 js 筆記 第二篇 瀏覽器外掛程式 第三篇 python執行js的常見方法 第四篇 selenium執行js 並繞過webdriver監測常見方法 第五篇 pyppeteer上執行js 並繞過webdriver監測常見方法 第六篇 pyppeteer下執行js 並繞過webdriver監測常...