带有徽标和导航的 HTML5/CSS 粘性标题 [英] HTML5/CSS Sticky Header with logo and navigation

查看：64
本文介绍了带有徽标和导航的 HTML5/CSS 粘性标题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

@charset "utf-8";*{边距:0px 0px 0px 0px;填充:0px 0px 0px 0px;}.top-容器{位置:绝对；宽度:100%；}.stopleft{填充顶部:34%；宽度:50%；边距:0px 0px 0px 0px;边框:实心 0px #000；向左飘浮;}.stopright{填充顶部:44.2%；宽度:50%；边距:0px 0px 0px 0px;边框:实心 0px #000；浮动:对；}.whiteBarSmall{宽度:100%；填充顶部:5%；背景颜色:#fff;位置:绝对；}.商标{位置:粘性；顶部:0；宽度:50%；向左飘浮;}.导航{边距:0px 0px 0px 0px;边框:实心 0px #000；位置:粘性；顶部:0；宽度:50%；浮动:对；}.navigation ul{高度:100px；}.按钮{列表样式:无；边距:25px 20px 25px 20px；浮动:对；}.navBackground{边框:实心 0px #000；位置:粘性；顶部:0；宽度:100%；填充顶部:5%；背景颜色:#a7a7a7；浮动:对；z-索引:-1；}.whiteBarLarge{宽度:100%；填充顶部:10%；背景色:#fff;}.indexImage{宽度:100%；}.sticky {位置:固定；顶部:0；宽度:100%；}.sticky + .content {填充顶部:102px；}页脚{宽度:100%；填充顶部:2.5%；背景颜色:#a7a7a7；}.navigation a:link {颜色:#000；显示:块；文本对齐:居中；文字装饰:无；字体系列:'Volkhov'，无衬线；字体大小:30px；}.navigation a:visited {颜色:#000；显示:块；文本对齐:居中；文字装饰:无；字体系列:'Volkhov'，无衬线；字体大小:30px；}.navigation a:focus {颜色:#000；显示:块；文本对齐:居中；文字装饰:无；字体系列:'Volkhov'，无衬线；字体大小:30px；}.navigation a:hover {颜色:#000；显示:块；文本对齐:居中；文字装饰:无；字体系列:'Volkhov'，无衬线；字体大小:30px；}.navigation a:active {颜色:#000；显示:块；文本对齐:居中；文字装饰:无；字体系列:'Volkhov'，无衬线；字体大小:30px；}

<html lang="de"><头><meta charset="utf-8"/><title>测试</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"><身体><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="测试标题" width="100%"/>

<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="导航"><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">博客</a></li><li class="button"><a href="pages/galerie.html">Galerie</a></li>

<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 class="whiteBarLarge">

<div class="indexImage"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRUPqqyzvnT6JVdDUeUgzDvX9tUpwjKv59spOBgVdYtf-2EaLhD" alt=""width="100%"/>

<div class="whiteBarLarge"></div><页脚></页脚></html>

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

解决方案

这就是你想要的吗?

@charset "utf-8";身体 {边距:0;}.导航栏{溢出:隐藏；背景色:#808080；位置:固定；顶部:0；宽度:100%；}.navbar {向左飘浮;显示:块；颜色:#f2f2f2；文本对齐:居中；填充:14px 16px；文字装饰:无；字体大小:17px；}.navbar a:hover {背景:#ddd;颜色:黑色;}.主要的 {填充:16px；边距顶部:30px；/* 高度:1500 像素；*//* 在本例中用于启用滚动 */}

<头><meta name="viewport" content="width=device-width, initial-scale=1"><风格></风格><身体><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="浮动:左"><a href="#galerie">画廊</a><a href="#blog">博客</a><a href="#preise">Preise</a><a href="#contact">联系方式</a><a href="#aboutUs">Über uns</a>

<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="测试标题" width="100%"/>

<div class="indexImage"><img src="http://www.hdwallpapery.com/static/images/dual-monitor-wallpapers-hd_dJyDicr.jpg" alt="" width="100%"/>

<div class="whiteBarLarge">

<div class="indexImage"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRUPqqyzvnT6JVdDUeUgzDvX9tUpwjKv59spOBgVdYtf-2EaLhD" alt=""width="100%"/>

<div class="whiteBarLarge"></div><页脚></页脚>

</html>

I want to create a homepage where you see an image at first with the actual navigation bar on the bottom of the browser. When you scroll down the navigation should stick to the top when it reaches the top of the browser.

I got 1 Logo on the left of the screen and the navigation on the right. The navigation should have a background as a bar across the screen and the logo should overlap this. When I scroll down i first want the logo (which is for example 250px high) to stick to the top and then when i further scroll down i want the navigation + background (about 100px) also to stick to the top. I don't know why the white space is generated either. Between the first and the second picture there should only be about 100px (the height of the grey bar(navigation bar). With this code everything except the background bar works..

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

I am having a lot of trouble with this bar... Hope someone can help me. Thanks!

解决方案

Is that what you want?

@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 粘性标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆