divが正しく配置されていません

ページが読み込まれたときにナビゲーションバーがウィンドウの下部に表示されるようにします（スクロールしている間は上に固定され、位置を固定できません）。私が考え出したのはバックグラウンドdivの高さをナビゲーションバーの高さからマイナス100vhにすることですが、ナビゲーションを上げる代わりにその奇妙な白いパッドが作成されます。divが正しく配置されていません

また、垂直方向の要素を.navigation（および.testers）に配置するにはどうすればよいですか。ナビゲーションは右になければならないが、ロゴは左側になければならない。私はあなたがオフセットウィンドウに基づいてNAVの位置を変更することができるようにそれが唯一、JSで行うことができると思います

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; 
 
}

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

出典

2017-01-21 Tomasz Czechowski

：

は、ここでは、コードです。

出典

2017-01-21 17:45:05

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>

出典

2017-01-21 18:33:33

@Tomaszは何をしたいということです！ –

divが正しく配置されていません

答えて

関連する問題