1
В идеале я бы хотел, чтобы навигация начала прозрачную работу с навигационными ссылками, которые все еще видны. Я пробовал многократно переписывать js-файл, но он не отвечает или полностью исчезает.Как сделать Nav start прозрачным, но появляться на прокрутке и исчезать при прокрутке в обратном направлении; сохраняя видимость навигационных ссылок?
<html lang="en">
<meta charset="utf-8" />
<head>
<title>Example Page</title>
<link rel="stylesheet" type="text/css" href="Web_Design_01_Stylesheet.css" />
</head>
<body>
<div id="container">
<header>
<div id="static_nav">
<nav class='navbar'>
<a href="#block_two">HOME</a>
<a href="#block_three">ABOUT</a>
<a href="#block_four">PEOPLE</a>
<a href="#end_block">CONTACT</a>
<a href="Member Login">LOG IN</a>
</nav>
</div>
</header>
<div id="block_two">
</div>
<div id="block_three">
<div id="column-left">
<header class="b3_hd">
Hospitality
</header>
<div class="b3_pics">
<div id="pic1">
</div>
</div>
<p class="area_content">
</p>
</div>
<div id="column-center">
<header class="b3_hd">
COLUMN CENTER
</header>
<div class="b3_pics">
<div id="pic2">
</div>
</div>
<p class="area_content">
</p>
</div>
<div id="column-right">
<header class="b3_hd">
COLUMN RIGHT
</header>
<div class="b3_pics">
<div id="pic3">
</div>
</div>
<p class="area_content">
</p>
</div>
</div>
<div id="block_four">
<header class="b4"> PEOPLE </header>
</div>
<div id="end_block">
<header class="eb_header">
CONTACT
</header>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</body>
</html>
CSS:
html {
overflow: hidden;
}
body {
height: 100%;
width: 100%;
max-width: 100%;
overflow-y: auto;
overflow-x: hidden;
margin: 0;
}
div#static_nav{
font-family: Arial, sans-serif;
padding-top: 10px;
text-align: right;
width: 100%;
height: 2em;
background-color: #3A3D3F;
position:fixed;
opacity: .90;
color: red;
vertical-align: middle;
}
div#static_nav a{
color: white;
text-decoration: none;
padding-right: 20px;
}
.navbar {
padding-right: 20px;
padding-top: 2px;
}
div#container {
margin-top: 10px
height: 10vh
width: 100%;
background-color: #16BA81;
color:;
}
div#block_two{
background-color: ;
padding-top: 10px;
height: 100vh;
background-image: url(/New_Website/sample_image.png);
background-size: cover;
}
div#block_three{
padding-top: 10px;
height: 100vh;
background-color: #E4E2E2;
}
div#column-left{
padding-top: 60px;
float: left;
width: 33%;
text-align: center;
font-size: 30px;
font-family: Helvetica, sans-serif;
}
div#column-right{
padding-top: 60px;
float: left;
width: 33%;
text-align: center;
font-size: 30px;
font-family: Helvetica, sans-serif;
}
div#column-center{
padding-top: 60px;
float: left;
width: 33%;
text-align: center;
font-size: 30px;
font-family: Helvetica, sans-serif;
}
div#block_four{
padding: 10px;
height: 100vh;
background-color: #E4E2E2;
}
div#end_block{
padding: 10px;
background-color: #F2F2F2;
height: 50vh;
text-align: center;
}
.area_content{
padding-left: 20px;
padding-right: 20px;
font-size: 20px;
color: #3A3D3F;
margin-left: auto;
margin-right: auto;
display: inline-block;
text-align: left;
}
.eb_header{
font-size: 30px;
font-family: Helvetica, sans-serif;
color: #3A3D3F;
}
.b3_pics{
max-width: inherit;
height: 50%;
}
.b4{
padding-top: 60px;
max-width: inherit;
text-align: center;
font-size: 30px;
font-family: Helvetica, sans-serif;
color: #3A3D3F;
}
.b3_hd{
color: #3A3D3F;
}
JQuery
// Я не мог понять, что я делаю неправильно в файле JS. Я вообще не получаю ответа.
(function($) {
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 200) {
$('#static_nav').fadeIn(500);
} else {
$('#static_nav').fadeOut(500);
}
});
});
});
Если честно, это лучшее решение. Я только сейчас читаю, что ОП не хотел, чтобы он полностью исчез. – Evochrome
Не стесняйтесь проголосовать: P – Brad
xD, не преувеличивайте, но вот вы: p – Evochrome