側邊欄跟隨滑動即將離開視窗時固定在側邊的效果

2021-10-04 05:16:48 字數 648 閱讀 3444

有時候網頁主體內容居中,分左右兩個模組,左邊為側邊欄,右邊為主要內容。側邊欄的長度有限(小於視窗高度),固定為一定的高度,主要內容過多時就會導致側邊空曠,看起來不太美觀,所以在網頁滑動到視窗失去側邊欄的時候再把側邊內容固定在視窗的側邊是一種比較好的處理方法。

本文所寫的方法相對來說比較簡單,具體思路如下:

class

="container"

>

"fixed"

class

="menu"

>

div>

class

="content"

>

div>

div>

側邊欄固定寬度,主體內容佔一定寬度比

.container

.menu

.fixed

.content

監測網頁的滾動事件,當頁面的的scrolltop大於menu的高度時,更改menu的樣式

(

function()

;})(

);

微信小程式側邊欄滑動特效 左右滑動

側邊欄滑動是很常見的功能,但是小程式出來不久,很多特效還沒有成熟案例,只能原生重寫,所以今天為大家帶來4個漂亮的側邊欄特效 側邊欄特效一 先看效果 wxml 程式設計客棧gt 第乙個item1 第二個item2 第三個item3 第四個item4 程式設計客棧 搭建上下兩層介面 寫一段css3的右移...

側邊欄 前端小案例之側邊欄

簡單側邊欄案例 隱藏右邊盒子滑鼠經過時顯示 最近剛開始入門學習前端用簡單的html結構加css樣式寫了個側邊欄的小案例在這裡分享給大家。效果如下 該案例主要是在乙個sidebar盒子裡面左邊放乙個ul做側邊欄裡面的li作為每一行的內容,然後將sidebar mask盒子定位到側邊欄的右邊,用disp...

側邊欄廣告

1 23192031 323334 天王蓋地虎,小雞燉蘑菇 35天王蓋地虎,小雞燉蘑菇 36天王蓋地虎,小雞燉蘑菇 37天王蓋地虎,小雞燉蘑菇 38天王蓋地虎,小雞燉蘑菇 39天王蓋地虎,小雞燉蘑菇 40天王蓋地虎,小雞燉蘑菇 41天王蓋地虎,小雞燉蘑菇 42天王蓋地虎,小雞燉蘑菇 43天王蓋地虎,...