滚动时将内容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.