文章詳情頁
javascript - 怎么讓頁面中固定定位的側邊欄的位置隨著滾動條動態增加呢?
瀏覽:159日期:2023-06-01 18:39:50
問題描述
需求是這樣的,一開始頁面的側邊欄是固定在頁面的某一位置(如:right:0;bottom:0),隨著滾動條的滾動,為了防止側邊欄折疊頁腳部分(參考下圖),到一定位置,bottom的值隨身滾動條的增加而增加,效果類似起點中文網的效果,代碼如下,求大神,我的bottom只增加一個就不動了!代碼如下:
//滾動條監聽事件$(window).scroll(function () { var sTop = $(document).scrollTop(); var Bottom = 100;//設置底部距離 if (sTop >= 1738) {Bottom++;//不斷增加$('.main .main_p').css('bottom',Bottom);//設置固定側邊框位置 }else{$('.main .main_p').css('bottom',0); }})
起點中文網的具體效果展示:http://read.qidian.com/chapte...
問題解答
回答1:不必不斷增加,很浪費資源。用 fixed 定位,判斷到底了之后換 absolute 定位或其它方式定位到底部。
回答2:看看這樣行不行. https://jsfiddle.net/eyvxw3wc/
標簽:
JavaScript
上一條:javascript - js如何實現這種操作,get(obj,’k1’,’k2’,’k3’).then((v)=>console.log(v))下一條:javascript - sublime已經安裝了babel插件和sublimelinter-jshint為什么還是顯示es6語法錯誤?
相關文章:
1. sql語句 - mysql中關聯表查詢問題2. css - chrome下a標簽嵌套img 顯示會多個小箭頭?3. javascript - 如何將一個div始終固定在某個位置;無論屏幕和分辨率怎么變化;div位置始終不變4. html - vue項目中用到了elementUI問題5. javascript - iframe 為什么加載網頁的時候滾動條這樣顯示?6. python - django models 為生成的html元素添加樣式。7. javascript - vscode alt+shift+f 格式化js代碼,通不過eslint的代碼風格檢查怎么辦。。。8. javascript - 有什么比較好的網頁版shell前端組件?9. mysql updtae追加數據sql語句10. javascript - 原生canvas中如何獲取到觸摸事件的canvas內坐標?
排行榜
