Question

我想创建一个主页，首先在其中看到图像，而实际的导航栏位于浏览器底部。向下滚动时，导航应在到达浏览器顶部时停留在顶部。

我在屏幕左侧获得1个徽标，在右侧获得导航。导航的背景应为横条，并在屏幕上与徽标重叠。当我向下滚动时，我首先希望徽标（例如250px高）粘贴在顶部，然后当我进一步向下滚动时，我希望导航+背景（大约100px）也粘贴在顶部。我也不知道为什么也会产生空白。在第一张和第二张图片之间，应该只有大约100px（灰色条（导航条）的高度）。使用此代码，除背景条之外的所有内容都可以使用。.

@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>

我在这个酒吧遇到很多麻烦... 希望可以有人帮帮我。谢谢！

Answer 1

是您想要的吗？

@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>

带有徽标和导航的HTML5 / CSS粘贴标头

1 个答案: