positioning nav bar at the bottom of the viewport which also always remains at the bottom of the 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;
}

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>

回答1:

The site you link to is using javascript to achieve that. I do not think it is possible to do it with pure 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.

来源：https://stackoverflow.com/questions/33467545/positioning-nav-bar-at-the-bottom-of-the-viewport-which-also-always-remains-at-t

标签

jquery

html

css

responsive-design