div固定顯示的幾種方法

2022-09-11 04:18:11 字數 780 閱讀 4985

很多時候我們會受到一些需求:

1、div一直置頂

2、div一直置底

3、超過一定的位置之後div置頂

4、超過一定位置之後div置底

那麼下面針對上面的幾個問題寫幾個案例:

一、div一直在螢幕的上方,這個倒是容易咱們直接使用position:fixed;然後設定他的top值和left就可以了,別忘了設定寬度哦

青格勒點選這裡檢視demo -》

二、這個跟上面的例子是一樣的,我不不多說了

青格勒點選這裡檢視demo -》

三、這個就比較有意思了,有些時候咱們的導航在banner的下方

如下圖:

這時候咱們的需求就出來了,當咱們的滾動條走到banner圖的底部的時候需要把n**的部分懸掛(position:fixed; top:0);

這時候咱們就得計算了,先獲取n**到document頂部的距離,然後在獲取滾動條的長度,相減就能得到window的頂部的距離,當兩者的相減<=0的時候懸掛。

html**如下

青格勒2132132

css**如下:

js**如下:

點選這裡檢視demo -》

四、還有超過一定位置之後div置底

html**:

青格勒2132132

css**:

js**:

看到**很多人都會有乙個疑問,為什麼scroll和resize時間中再執行一遍?這是因為有些人在瀏覽網頁的時候會改變瀏覽器的大小的緣故,當瀏覽器的大小有變化的時候咱們帶再次計算數值,然後進行調整,好了,完畢

js jQuery顯示隱藏div的幾種方法

aaadiv js隱藏和顯示div的方式有兩種 方式1 隱藏後釋放占用的頁面空間 通過設定display屬性可以使div隱藏後釋放占用的頁面空間.style display none document.getelementbyid demo style.display none 隱藏document...

JS jQuery顯示隱藏div的幾種方法

div id demo aaa div js隱藏和顯示div的方式有兩種 方式1 隱藏後釋放占用的頁面空間 通過設定display屬性可以使div隱藏後釋放占用的頁面空間.style display none document.getelementbyid demo style.display no...

隱藏div的幾種方法

方法1 displayclass one div one 方法2 opacity.two 方法3 rgba.three 方法4 float left margin left 或 float right margin right 值用負的.four 方法5 絕對定位或者固定定位 left 或者 rig...