html簡(jiǎn)單響應(yīng)式滾動(dòng)條置頂

ranwu 發(fā)布于2019-08-01 17:41 / 1781人閱讀

摘要：那么盒子首先就需要設(shè)置一個(gè)的高和定位的值在中也要控制值，通過判斷滾動(dòng)條移動(dòng)到容器頂部時(shí)固定最終效果獲取屏幕滾動(dòng)條

簡(jiǎn)單響應(yīng)式滾動(dòng)條置頂 一般的，讓頁面出現(xiàn)滾動(dòng)條的常見方法有：

overflow:auto||overflow:scroll
或者overflow-x水平滾動(dòng)條和overflow-y垂直滾動(dòng)條

那么現(xiàn)在要實(shí)現(xiàn)這樣的一個(gè)效果：

直接在body中給一個(gè)header，后面一個(gè)Group盒子，并且header為常駐頂部的，實(shí)現(xiàn)滾動(dòng)條頂部位置不滾動(dòng)到header中（包含在header中會(huì)影響美觀）

首先看例子：

分析：

每當(dāng)滾動(dòng)條移動(dòng)到header的高度的位置時(shí)，這時(shí)盒子中的前排內(nèi)容是并沒有顯示出來的，但是滾動(dòng)條到此處就得停止。那么盒子首先就需要設(shè)置一個(gè)margin-top：header的高 ,和定位top的值  ,在js中也要控制scrollTop值，通過判斷滾動(dòng)條移動(dòng)到容器頂部時(shí)固定
header{position: fixed;top: 0;left: 0;right: 0;z-index: 999;}  
  #con{margin-top: 150px;position: absolute;top:50px;}

最終效果：

js獲取屏幕滾動(dòng)條：document.documentElement.scrollTop || document.body.scrollTop

GPU云服務(wù)器云服務(wù)器 html 響應(yīng)式寫法 html響應(yīng)式切換 html5響應(yīng)式 html響應(yīng)式導(dǎo)布局

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/51301.html

相關(guān)文章

html簡(jiǎn)單響應(yīng)式滾動(dòng)條置頂

摘要：那么盒子首先就需要設(shè)置一個(gè)的高和定位的值在中也要控制值，通過判斷滾動(dòng)條移動(dòng)到容器頂部時(shí)固定最終效果獲取屏幕滾動(dòng)條簡(jiǎn)單響應(yīng)式滾動(dòng)條置頂一般的，讓頁面出現(xiàn)滾動(dòng)條的常見方法有： overflow:auto||overflow:scroll 或者overflow-x水平滾動(dòng)條和overflow-y垂直滾動(dòng)條那么現(xiàn)在要實(shí)現(xiàn)這樣的一個(gè)效果：直接在body中給一個(gè)header，后面一個(gè)Gr...

daryl 2019-08-21 16:43 評(píng)論0 收藏0
html簡(jiǎn)單響應(yīng)式滾動(dòng)條置頂

摘要：那么盒子首先就需要設(shè)置一個(gè)的高和定位的值在中也要控制值，通過判斷滾動(dòng)條移動(dòng)到容器頂部時(shí)固定最終效果獲取屏幕滾動(dòng)條簡(jiǎn)單響應(yīng)式滾動(dòng)條置頂一般的，讓頁面出現(xiàn)滾動(dòng)條的常見方法有： overflow:auto||overflow:scroll 或者overflow-x水平滾動(dòng)條和overflow-y垂直滾動(dòng)條那么現(xiàn)在要實(shí)現(xiàn)這樣的一個(gè)效果：直接在body中給一個(gè)header，后面一個(gè)Gr...

frolc 2019-08-30 15:53 評(píng)論0 收藏0
用sort實(shí)現(xiàn)orderby

摘要：工作到了這個(gè)年數(shù)感覺那些基本函數(shù)語法已經(jīng)跟人合一了根本不會(huì)為操作一些數(shù)據(jù)結(jié)構(gòu)而思考半天了在做小程序的時(shí)候遇到了個(gè)的場(chǎng)景結(jié)果發(fā)現(xiàn)沒有以為的那么簡(jiǎn)單也許是之前不求甚解的原因那么現(xiàn)在來解決的問題問題的產(chǎn)生與探討方向在小程序中有個(gè)將的某一條置頂?shù)男? 工作到了這個(gè)年數(shù), 感覺那些基本函數(shù)語法已經(jīng)跟人合一了, 根本不會(huì)為操作一些數(shù)據(jù)結(jié)構(gòu)而思考半天了. 在做小程序的時(shí)候遇到了個(gè)orderby的場(chǎng)景,...

jiekechoo 2019-08-23 14:14 評(píng)論0 收藏0
window.scrollTo()

摘要：方法工作上遇到了這樣的場(chǎng)景，在聊天頁面當(dāng)用戶刷新頁面時(shí)滾動(dòng)條置底。若有誤，請(qǐng)斧正感謝 scrollTo方法工作上遇到了這樣的場(chǎng)景，在聊天頁面當(dāng)用戶刷新頁面時(shí)滾動(dòng)條置底。很簡(jiǎn)單對(duì)吧，大概如下范例： Title scrollTo(0, document.body.offsetHeight) 但時(shí)實(shí)際上這段代碼并不能保證用戶的每次刷新都能把滾動(dòng)...

lscho 2019-08-21 17:32 評(píng)論0 收藏0
純CSS響應(yīng)式瀑布流 columns

摘要：效果圖縮小一點(diǎn)板端雞端瘋六這個(gè)響應(yīng)式瀑布流誤打誤撞寫出來的，因?yàn)橹翱窗俣葘戇^瀑布流，不太好，好復(fù)雜，又要什么的，我就懶，算了算了，不寫了。效果圖PC 1366*768showImg(https://user-gold-cdn.xitu.io/2019/5/20/16ad4b60c469301f);縮小一點(diǎn)showImg(https://user-gold-cdn.xitu.io/2019/...

番茄西紅柿 2019-05-23 15:55 評(píng)論0 收藏0