如何实现带有徽标和导航的HTML 5/CSS标头?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (66)

我想要创建一个主页,首先可以看到浏览器底部的实际导航栏中的图像。向下滚动时,当导航到达浏览器顶部时,导航应该坚持到顶部。

屏幕左边有一个标志,右边有导航。导航应该有一个背景,作为一个条形横过屏幕和徽标应该重叠这一点。当我向下滚动时,我首先希望徽标(例如250 PX高)坚持到顶部,然后再向下滚动,我希望导航+背景(大约100 px)也贴在顶部。我不知道为什么会产生空白。在第一张和第二张图片之间,应该只有大约100 px(灰条的高度(导航条)。有了这段代码,除了背景条之外,一切都能运行:

@charset "utf-8";

*{
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

.top-container{
	position: absolute;
	width: 100%;
}


.stopleft{
	padding-top: 34%;
	width: 50%;
	margin: 0px 0px 0px 0px;
	border: solid 0px #000;
	float: left;
}

.stopright{
	padding-top: 44.2%;
	width: 50%;
	margin: 0px 0px 0px 0px;
	border: solid 0px #000;
	float: right;
}


.whiteBarSmall{
	width: 100%;
	padding-top: 5%;
	background-color: #fff;
	position: absolute;
}

.logo{
		position: sticky;
		top: 0;
		width: 50%;
		float: left;
	 }

.navigation{
	margin: 0px 0px 0px 0px;
	border: solid 0px #000;
	position: sticky;
	top: 0;
	width: 50%;
	float: right;
}

	.navigation ul{
		height: 100px;
	}
	 .button{
		list-style: none;
		margin: 25px 20px 25px 20px;
		float: right;
	 }

.navBackground{
	border: solid 0px #000;
	position: sticky;
	top: 0;
	width: 100%;
	padding-top: 5%;
	background-color: #a7a7a7;
	float: right;
	z-index: -1;
}


.whiteBarLarge{
	width: 100%;
	padding-top: 10%;
	background-color: #fff;
}


.indexImage{
	width: 100%;
}



.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 102px;
}



footer{
	width: 100%;
	padding-top:  2.5%;
	background-color: #a7a7a7;
}

.navigation a:link {
    color: #000;
    display: block;
    text-align: center;
    text-decoration: none;
    font-family: 'Volkhov', sans-serif;
    font-size: 30px;
}


.navigation a:visited {
    color: #000;
    display: block;
    text-align: center;
    text-decoration: none;
    font-family: 'Volkhov', sans-serif;
    font-size: 30px;
}
.navigation a:focus {
    color: #000;
    display: block;
    text-align: center;
    text-decoration: none;
    font-family: 'Volkhov', sans-serif;
    font-size: 30px;
}

.navigation a:hover {
    color: #000;
    display: block;
    text-align: center;
    text-decoration: none;
    font-family: 'Volkhov', sans-serif;
    font-size: 30px;
}

.navigation a:active {
    color: #000;
    display: block;
    text-align: center;
    text-decoration: none;
    font-family: 'Volkhov', sans-serif;
    font-size: 30px;
}
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8" />
	<title>Test</title>
	<meta name="description" content="…." />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<link rel="icon" href="pics/favicon.ico" />
	<link rel="stylesheet" href="styles/basics.css" type="text/css" />
	<link rel="stylesheet" href="styles/index.css" type="text/css" />
	<link rel="stylesheet" href="styles/links.css" type="text/css" />
    
    <link href="https://fonts.googleapis.com/css?family=Volkhov" rel="stylesheet"> 
</head>
<body>
    <div class="top-container">
        <img src="https://pre00.deviantart.net/e893/th/pre/i/2006/132/b/4/widescreen_dreamy_world_6th_by_grafixeye.jpg" alt="Test header" width="100%" />
    </div>
    <div class="stopleft"></div>
    <div class="stopright"></div>
        <div class="logo"><img src="https://png.icons8.com/ios/1600/external-link-squared-filled.png" alt="Logo" width="50%" /></div>
        <div class="navigation">
             <ul>
                <li class="button"><a href="pages/uber_uns.html">Über uns</a></li>
                <li class="button"><a href="pages/kontakt.html">Kontakt</a></li>
                <li class="button"><a href="pages/preise.html">Preise</a></li>
                <li class="button"><a href="pages/blog.html">Blog</a></li>
                <li class="button"><a href="pages/galerie.html">Galerie</a></li>
             </ul>
        </div>
        <div class="navBackground"></div>
    <div class="indexImage">
        <img src="http://www.hdwallpapery.com/static/images/dual-monitor-wallpapers-hd_dJyDicr.jpg" alt="" width="100%" />
    </div>
    <div class="whiteBarLarge">
    </div>
    <div class="indexImage">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRUPqqyzvnT6JVdDUeUgzDvX9tUpwjKv59spOBgVdYtf-2EaLhD" alt="" width="100%" />
    </div>
    <div class="whiteBarLarge"></div>
    <footer></footer>
</body>
</html>

提问于
用户回答回答于

代码如下:

@charset "utf-8";

body {margin:0;}

.navbar {
  overflow: hidden;
  background-color: #808080;
  position: fixed;
  top: 0;
  width: 100%;
}

.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.navbar a:hover {
  background: #ddd;
  color: black;
}

.main {
  padding: 16px;
  margin-top: 30px;
  /* height: 1500px; */ /* Used in this example to enable scrolling */
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

</style>
</head>
<body>

<div class="navbar">
<img src="https://png.icons8.com/ios/1600/external-link-squared-filled.png" alt="Logo" class-="logo" height=50 width=50 style="float: left">
  <a href="#galerie">Galerie</a>
  <a href="#blog">Blog</a>
  <a href="#preise">Preise</a>
  <a href="#contact">Contact</a>
  <a href="#aboutUs">Über uns</a>
</div>

<div class="main">
 <div class="top-container">
        <img src="https://pre00.deviantart.net/e893/th/pre/i/2006/132/b/4/widescreen_dreamy_world_6th_by_grafixeye.jpg" alt="Test header" width="100%" />
    </div>
 <div class="indexImage">
        <img src="http://www.hdwallpapery.com/static/images/dual-monitor-wallpapers-hd_dJyDicr.jpg" alt="" width="100%" />
    </div>
 <div class="whiteBarLarge">
    </div>
    <div class="indexImage">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRUPqqyzvnT6JVdDUeUgzDvX9tUpwjKv59spOBgVdYtf-2EaLhD" alt="" width="100%" />
    </div>
    <div class="whiteBarLarge"></div>
    <footer></footer>
</div>

</body>
</html>

扫码关注云+社区

领取腾讯云代金券