Question

我希望当页面加载时导航栏位于窗口的底部（但是在滚动时它会粘在顶部，所以我无法使其位置固定）。我唯一能想到的是使背景div高度为100vh减去导航栏高度，但它会创建奇怪的白色填充而不是导航。

另外，如何在我的.navigation（以及.tester中）中垂直居中？徽标必须位于左侧，导航必须位于右侧。

以下是代码：

＆＃13;

html,body {
  min-width:320px;
  min-height:320px;
  margin:0;
  font-family: 'Lato', sans-serif;
  text-align:center;
}

h1 {
  margin-top:0;
  font-size:68px;
  font-weight:bold;
}

.header-wrapper {
  background-image: url("images/backgrounds/typography.jpg");
  background-size:cover;
  background-position:center;
  min-height:calc(100vh - 6em - 100px);
  text-align:center;
  padding-top:6em;
  margin:0 auto;
  position:relative;
}
.tester{
  position:absolute;
  width:100%;
  display:flex;
  bottom:50px;
  margin: auto;
  align-items: center;
  justify-content: center;
}
.tester a{
  margin-left:1em;
  margin-right:1em;
  opacity: 0.75;
}
.tester a:hover{
  opacity:1;
}
.slider-buttons {
  position:absolute;
  max-width:1170px;
}
.typography {
  bottom: 100px;
  left:auto;
}
.navigation {
  max-width:1170px;
  margin:0 auto;
  height:94px;
  background-color:white;
  bottom:0;
}

nav {
  float:right;
  text-transform:uppercase;
}
nav a {
  text-decoration:none;
  color:#626262;
  padding:40px 20px 40px 20px;
  margin:0;
}
nav #home:hover, #menu2:hover, #menu3:hover, #menu4:hover, #menu5:hover {
  color:white;
}
nav #home:hover {
  background-color:#dfbb42;
}
nav #menu2:hover {
  background-color:#c43434;
}
nav #menu3:hover {
  background-color:#508b61;
}
nav #menu4:hover {
  background-color:#428d9e;
}
nav #menu5:hover {
  background-color:#575fbd;
}


#logo {
  float:left;
  margin-left:30px;
}

＆＃13;

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>random title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <link rel="stylesheet" href="css/style.css">
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> 
</head>

<body>


<section>
  <div class="header-wrapper">
    <h1>Lorem ipsum sit dolor amet</h1>
    <div class="tester">
      <a href="">          
        <div class="typography">
          <img src="images/slider-buttons/typography/typography-icon.jpg">
          <img src="images/slider-buttons/typography/typography-text.jpg">
        </div>
      </a>
      <a href="">
        <div class="typography">
          <img src="images/slider-buttons/typography/typography-icon.jpg">
          <img src="images/slider-buttons/typography/typography-text.jpg">
        </div>
      </a>
      </a>
      <a href="">
        <div class="typography">
          <img src="images/slider-buttons/typography/typography-icon.jpg">
          <img src="images/slider-buttons/typography/typography-text.jpg">
        </div>
      </a>
      </a>
    </div>
  </div>
</section>



<section id="menu2">
  <div class="navigation">
    <nav>
    <a href="" target="_top" id="home">Home</a>
    <a href="" id="menu2">Menu 2</a>
    <a href="" id="menu3">Menu 3</a>
    <a href="" id="menu4">Menu 4</a>
    <a href="" id="menu5">Menu 5</a>
  </nav>
  <img src="css/images/logo.png" alt="Logo" id="logo">
</div>
</section>

＆＃13;

Answer 1

我想这只能用JS来完成，所以你可以根据窗口偏移来改变导航位置。

Answer 2

当页面使用Jquery加载时，您可以更好地使用jquery隐藏导航栏，并在用户向下滚动页面时显示它。这是一个例子：

$(document).ready(function(){
$(window).scroll(function(){
$('#navbar').fadeIn("slow");
  
 setTimeout(function(){
 if($(window).scrollTop()<10){
 $('#navbar').fadeOut("slow");
 }
   
 },100) 
  
})



})

#navbar{
  position:fixed;
  top:0px;
width:100%;
height:100px;
background:#eeeeee;
color:white;
text-align:center;
  display:none;
  
}
#content{

height:1000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbar"><h1>lorem ipsum</h1></div>
<div id="content"></div>

div未正确定位

2 个答案: