定位导航栏在视口的底部，它始终保持在div的底部 [英] positioning nav bar at the bottom of the viewport which also always remains at the bottom of the div
问题描述
有3个div，第一个div有一个标志，第二个有滑块，第三个div是导航，我想我的导航div固定在视口的底部，当它到达顶部变粘。我用这个代码实现这一点。
There are 3 divs, 1st div has a logo and 2nd one has slider in it and 3rd div is navigation, I want my navigation div to be fixed at the bottom of the viewport which becomes sticky when it reaches the top. I achieve this with this code.
nav{
position:absolute;
width:100%;
height: 56px;
background-color:#ffffff;
bottom:0px;
display:block;
border-bottom: 1px solid #ededed;
background: #FFF;
font-family: 'Cinzel', serif;
font-weight:600;
font-size: 10px;
line-height: 1.5;
letter-spacing: 2px;
}
代码运行良好，但是当浏览器调整大小时，导航定位在底部打破了布局，当它来到滑块，我想当浏览器调整大小的高度导航的div的高度适应视口的高度，我想创建的效果的工作示例是这里
The code runs well, but when the browser is resized, the navigation which is positioned at the bottom breaks the layout as it comes over slider, I want that when the browser is resized the height of div above nav adapts the height of viewport, the working example of effect i want to create is here
#topbar{
display:block;
position: fixed;
width:100%;
height: 30px;
color:#fff;
background-color:#073860;
top:0px;
display:block;
}
#head{
background-color:#ededed;
height:500px;
}
#logo{
font-family: 'lainiedayshregular';
display: block;
height:134px;
text-align: center;
margin: 29px 0px 0px;
padding: 20px 20px 5px;
font-size:3em;
}
#logo a{
position:relative;
height: 109px;
width: 377px;
text-decoration:none;
color:#073860;
font-size:2em;
}
nav{
position:absolute;
width:100%;
height: 56px;
background-color:#ffffff;
bottom:0px;
display:block;
border-bottom: 1px solid #ededed;
background: #FFF;
font-family: 'Cinzel', serif;
font-weight:600;
font-size: 10px;
line-height: 1.5;
letter-spacing: 2px;
}
nav ul li {
display:inline;
text-decoration:none;
}
nav ul li a{
text-decoration:none;
text-transform: uppercase;
color:#073860;
outline: 0px none;
}
.menu{
left: 0px;
width: 100%;
height: 56px;
position:sticky;
top:30px;
}
.navbarlogo{
font-family: 'lainiedayshregular';
color:#073860;
}
#test{
height:1000px;
background-color: #fafbf9;
}
#footer{
border-top: 1px solid #EDEDED;
background-color: #FFF;
height: 37px;
z-index: 3;
bottom: -35px;
transition: bottom 0.6s ease-in-out 0s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!--CSS Links-->
<link rel="stylesheet" type="text/css" href="style.css"><!--Custom stylesheet-->
<title>Title here</title>
</head>
<body>
<div id="topbar"> </div>
<div id="logo"><a href="#">
LOGO
</a> </div>
<div id="head" class="row">
</div>
<nav class="menu">
</nav>
<div id="test" class="row"></div>
<footer id="footer" style='display:none; position:fixed; bottom:0px; left:0px; width:100%;'>footer test</footer>
</body>
</html>
推荐答案
您链接到的网站使用javascript来实现。我不认为有可能做到纯CSS。
The site you link to is using javascript to achieve that. I do not think it is possible to do it with pure CSS.
他们使用一个监听器和JQuery的 $（document）.scrollTop 来计算页面上某人滚动的位置，如果他们在某一位置以下，则向< body> 标记，然后可用于引用将导航定位的CSS。
They are using a listener and JQuery's $(document).scrollTop() to calculate where someone is scrolled to on the page, and if they are below a certain position, are adding a class to the <body> tag, which can then be used to reference CSS that fixes the navigation in position.
这篇关于定位导航栏在视口的底部，它始终保持在div的底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
