蒙層底部不動 z index失效

2021-10-25 00:09:48 字數 1306 閱讀 6113

開啟蒙層時新增

$


('body').


css(


)
關閉蒙層時新增

$


('body').


css(


)
// 監聽滾動條到頁面頂部的距離


scrolltobottom=(


)=>


// 頁面新增監聽滾動事件


window.


addeventlistener


('scroll'


,this


.scrolltobottom.


bind


(this


))
// 蒙層出現時$(


'body').


css(


)
// 蒙層關閉$(


'body').


removeattr


('style')$


(window)


.scrolltop


(this


.currenttop)
父元素新增相對定位，第二個子元素相對定位，第乙個子元素新增z-index失效，被第二個子元素遮擋，要想第乙個子元素在第二個子元素上方展示，要給第乙個子元素新增相對定位

html標籤:

"title-word"


>


真正的一家人<


/p>


<


/span>


<


/li>


每乙個禮物，每一次點亮，每一天陪伴，都能給我勇氣<


/p>


<


/span>


<


/li>


每乙份守護都是最真摯的感情。<


/p>


<


/span>


<


/li>


<


/ul>
css樣式：

.title-word p}}
第乙個子元素新增相對定位後：

第乙個子元素未新增定位前：

禁止蒙層底部頁面跟隨滾動

彈窗是一種常見的互動方式，而蒙層是彈窗必不可少的元素，用於隔斷頁面與彈窗區塊，暫時阻斷頁面的互動。但是，在蒙層元素中滑動的時候，滑到內容的盡頭時，再繼續滑動，蒙層底部的頁面會開始滾動，顯然這不是我們想要的效果，因此需要阻止這種行為。那麼，如何阻止呢？請看以下分析 overflow hidden he...

禁止蒙層底部頁面跟隨滾動

彈窗是一種常見的互動方式，而蒙層是彈窗必不可少的元素，用於隔斷頁面與彈窗區塊，暫時阻斷頁面的互動。但是，在蒙層元素中滑動的時候，滑到內容的盡頭時，再繼續滑動，蒙層底部的頁面會開始滾動，顯然這不是我們想要的效果，因此需要阻止這種行為。那麼，如何阻止呢？請看以下分析 overflow hidden he...

移動端蒙層底部頁面禁止滑動

蒙層 蒙層居中，且底部div禁止滑動。container style 因為不同螢幕高度不同，且字型大小不同content高度也不同，所以高度在js中控制。用 代替document.queryselector,節省重複 var function selector 彈出框 function show p...