html簡單響應式滾動條置頂

frolc 發(fā)布于2019-08-30 15:53 / 1259人閱讀

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

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

overflow:auto||overflow:scroll
或者overflow-x水平滾動條和overflow-y垂直滾動條

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

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

首先看例子：

分析：

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

最終效果：

js獲取屏幕滾動條：document.documentElement.scrollTop || document.body.scrollTop

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/116610.html

html簡單響應式滾動條置頂

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

ranwu 2019-08-01 17:41 評論0 收藏0
html簡單響應式滾動條置頂

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

daryl 2019-08-21 16:43 評論0 收藏0
用sort實現(xiàn)orderby

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

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

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

lscho 2019-08-21 17:32 評論0 收藏0
純CSS響應式瀑布流 columns

摘要：效果圖縮小一點板端雞端瘋六這個響應式瀑布流誤打誤撞寫出來的，因為之前看百度寫過瀑布流，不太好，好復雜，又要什么的，我就懶，算了算了，不寫了。效果圖PC 1366*768showImg(https://user-gold-cdn.xitu.io/2019/5/20/16ad4b60c469301f);縮小一點showImg(https://user-gold-cdn.xitu.io/2019/...

番茄西紅柿 2019-05-23 15:55 評論0 收藏0