滾動時將內容div隱藏在固定div下方
[英]Hide the content div underneath the fixed div while scrolling
問題描述
- .shadow-box div用作包含徽標和2按鈕的固定標題。
- .rest div用於內容，滾動時應放在標題的下面。
現在，當頁面滾動時， .rest div中的內容將滾動並與.shadow-box div表示的固定標題重疊；
@font-face { font-family: 'halfmoon'; /*a name to be used later*/ src: url('halfmoon_regular.woff'); /*URL to font*/ } @font-face { font-family: 'halfmoon_b'; /*a name to be used later*/ src: url('halfmoon_bold.woff'); /*URL to font*/ } body{ margin:0px; } .shadow-box{ position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; height: 60px; border-bottom: 2px solid #d0d4d9; box-shadow: 0px 1px 1px #d0d4d9; text-align:center; overflow: hidden; } .shadow-box .github-img{ position: absolute;; top:7px; left: 315px; margin:13px auto background: #000; } .shadow-box img{ display: inline-block; margin:13px auto; text-align: center; } .shadow-box .button-link{ position: absolute;; padding:7px 16px; top:20px; right: 335px; border:1px solid #006DF0; border-radius:10px; color: #006DF0; text-decoration: none; text-align:inherit; font-family: halfmoon_b, sans-serif; } .shadow-box .github-link{ position: absolute; padding:7px 16px; top:20px; left: 335px; color: #006DF0; text-decoration: none; text-align:inherit; font-family: halfmoon_b, sans-serif; } .rest{ position: absolute; background-color: rgb(250,250,250); text-align:center; height:800px; top:60px; width:100%; z-index:5; padding-top:20px; overflow: auto; } .rest h1{ font-weight: 300; font-size: 250%; color: rgb(100,100,100); font-family: halfmoon, sans-serif; }
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>CloudBox</title> <link rel="shortcut icon" href="img/g3.ico" /> <!-- <script src="js/script.js"></script> --> <link rel="stylesheet" type="text/css" media="screen" href="css/index.css" /> </head> <body> <div class="shadow-box"> <a href="https://github.com/alexifrim95/CloudBox" id="git-img" class="github-img"><img src="img/GitHub-Mark-32px.png" alt="github-logo" class="github-logo"></a> <a href="https://github.com/alexifrim95/CloudBox" id="git-link" class="github-link">GitHub link</a> <img src="img/g3.png" alt="logo" class="logo"> <img src="img/logo-text.png" alt="logo-text" class=logo-text"> <a href="#" id="sign-in" class="button-link">Sign in</a> </div> <div class="rest" > <h1>Cloud platform built<br>from scratch</h1> </div> </body> </html>
2 個解決方案
解決方案1
1 2016-12-25 18:59:34
您固定的div .shadow-box是透明的。 為其添加一些背景。
@font-face { font-family: 'halfmoon'; /*a name to be used later*/ src: url('halfmoon_regular.woff'); /*URL to font*/ } @font-face { font-family: 'halfmoon_b'; /*a name to be used later*/ src: url('halfmoon_bold.woff'); /*URL to font*/ } body{ margin:0px; } .shadow-box{ position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; height: 60px; border-bottom: 2px solid #d0d4d9; box-shadow: 0px 1px 1px #d0d4d9; text-align:center; overflow: hidden; background-color: white; } .shadow-box .github-img{ position: absolute;; top:7px; left: 315px; margin:13px auto background: #000; } .shadow-box img{ display: inline-block; margin:13px auto; text-align: center; } .shadow-box .button-link{ position: absolute;; padding:7px 16px; top:20px; right: 335px; border:1px solid #006DF0; border-radius:10px; color: #006DF0; text-decoration: none; text-align:inherit; font-family: halfmoon_b, sans-serif; } .shadow-box .github-link{ position: absolute; padding:7px 16px; top:20px; left: 335px; color: #006DF0; text-decoration: none; text-align:inherit; font-family: halfmoon_b, sans-serif; } .rest{ position: absolute; background-color: rgb(250,250,250); text-align:center; height:800px; top:60px; width:100%; z-index:5; padding-top:20px; overflow: auto; } .rest h1{ font-weight: 300; font-size: 250%; color: rgb(100,100,100); font-family: halfmoon, sans-serif; }
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>CloudBox</title> <link rel="shortcut icon" href="img/g3.ico" /> <!-- <script src="js/script.js"></script> --> <link rel="stylesheet" type="text/css" media="screen" href="css/index.css" /> </head> <body> <div class="shadow-box"> <a href="https://github.com/alexifrim95/CloudBox" id="git-img" class="github-img"><img src="img/GitHub-Mark-32px.png" alt="github-logo" class="github-logo"></a> <a href="https://github.com/alexifrim95/CloudBox" id="git-link" class="github-link">GitHub link</a> <img src="img/g3.png" alt="logo" class="logo"> <img src="img/logo-text.png" alt="logo-text" class=logo-text"> <a href="#" id="sign-in" class="button-link">Sign in</a> </div> <div class="rest" > <h1>Cloud platform built<br>from scratch</h1> </div> </body> </html>
解決方案2
0 2016-12-25 21:28:24
如果您希望導航透明：
1-將您的背景顏色添加到body中：body {background-color：rgb（250,250,250）;}
或2-從.rest {top：60px;}中刪除此代碼，並增加margin-top：70px;
滾動時隱藏透明 div 下的內容
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.