将导航栏定位在视口底部，同时始终保持在 div 底部。

Question

将导航栏定位在视口底部，同时始终保持在 div 底部。

3

这里有3个div，第一个div里有一个logo，第二个div里有一个幻灯片，第三个div是导航。我希望我的导航div固定在视口底部，在滚动到顶部时变为粘性的。我用下面的代码实现了这个效果。

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高度适应窗口视图的高度。我想创建的效果的工作示例在此处链接。

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

- Saurabh Chaudhary

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- RichardB · Answer 1

你链接的网站是使用JavaScript来实现这个功能的。我认为纯CSS无法做到。

他们使用监听器和JQuery的$(document).scrollTop()来计算页面上滚动到哪里，如果他们在某个位置以下，则会向<body>标签添加一个类，然后可以使用该类引用CSS来固定导航位置。