javascript - 怎么讓頁(yè)面中固定定位的側(cè)邊欄的位置隨著滾動(dòng)條動(dòng)態(tài)增加呢?
問(wèn)題描述
需求是這樣的,一開始頁(yè)面的側(cè)邊欄是固定在頁(yè)面的某一位置(如:right:0;bottom:0),隨著滾動(dòng)條的滾動(dòng),為了防止側(cè)邊欄折疊頁(yè)腳部分(參考下圖),到一定位置,bottom的值隨身滾動(dòng)條的增加而增加,效果類似起點(diǎn)中文網(wǎng)的效果,代碼如下,求大神,我的bottom只增加一個(gè)就不動(dòng)了!代碼如下:
//滾動(dòng)條監(jiān)聽事件$(window).scroll(function () { var sTop = $(document).scrollTop(); var Bottom = 100;//設(shè)置底部距離 if (sTop >= 1738) {Bottom++;//不斷增加$('.main .main_p').css('bottom',Bottom);//設(shè)置固定側(cè)邊框位置 }else{$('.main .main_p').css('bottom',0); }})
起點(diǎn)中文網(wǎng)的具體效果展示:http://read.qidian.com/chapte...
問(wèn)題解答
回答1:不必不斷增加,很浪費(fèi)資源。用 fixed 定位,判斷到底了之后換 absolute 定位或其它方式定位到底部。
回答2:看看這樣行不行. https://jsfiddle.net/eyvxw3wc/
相關(guān)文章:
1. docker - 如何修改運(yùn)行中容器的配置2. javascript - Web微信聊天輸入框解決方案3. 請(qǐng)教各位大佬,瀏覽器點(diǎn) 提交實(shí)例為什么沒(méi)有反應(yīng)4. docker images顯示的鏡像過(guò)多,狗眼被亮瞎了,怎么辦?5. javascript - 移動(dòng)端textarea不能上下滑動(dòng),該怎么解決?6. javascript - history.replaceState()無(wú)法改變query參數(shù)7. css - 對(duì)于類選擇器使用的問(wèn)題8. javascript - Ajax加載Json時(shí),移動(dòng)端頁(yè)面向左上角縮小一截兒,加載完成后才正常顯示,這該如何解決?9. javascript - 為什么這個(gè)點(diǎn)擊事件需要點(diǎn)擊兩次才有效果10. javascript - 為什么form表單提交沒(méi)有跨域問(wèn)題,但ajax提交有跨域問(wèn)題?
