Issue
I've got a problem when I'm trying to create a menu effects. I've got this JavaScript code from the other and paste into my code but sad to say doesn't work for me and I don't know what is the reason.
Here is my code:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>NMSC</title>
<link rel="stylesheet" type="text/css" href="css/global.css">
<script type="text/javascript" src="js/nav-slide.js">
</head>
<body>
<nav class="nav-main">
<div class="logo">Website</div>
<ul>
<li><a href="#" class="nav-item">Home</a></li>
<li><a href="#" class="nav-item">Library System</a></li>
<li><a href="#" class="nav-item">Rules & Regulation</a></li>
<li><a href="#" class="nav-item">Service Hours</a></li>
<li><a href="#" class="nav-item">The Library</a></li>
</ul>
</nav>
<div class="big-wrapper">
<header>
<h1>NMSC Online Library</h1>
</header>
</div>
</body>
</html>
CSS
.nav-main {
z-index: 99;
position: fixed;
width: 100%;
background-color: #222;
height: 50px;
color: #fff;
box-shadow: 5px 4px 5px #333333;
-webkit-box-shadow: 5px 4px 5px #333333;
-moz-box-shadow: 5px 4px 5px #333333;
}
JavaScript for the menu:
$(window).scroll(function () {
var d = $('.big-wrapper');
if (d.offset().top < 400) {
$('.nav-main').fadeIn();
} else {
$('.nav-main').fadeOut();
}
});
Now I've got what the problem it is; when I do this on JavaScript file:
alert('hello');
JavaScript popup when I reload the page then when I do this:
$(window).scroll(function () {
alert('hello');
});
then scroll, nothing happens. I also tried to paste your answer on plain scratch but its seems the same: nothing happens.
Solution
First of all, connect jquery library:
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
Now, you should get body scroll postion, and verify if it is lower than needed value (400 in your case). This should be done when document is "ready". Here is the fiddle: http://jsfiddle.net/h06zpy12/1/
$( document ).ready(function() {
$(window).scroll(function () {
if ($('body').scrollTop() < 400) {
$('.nav-main').fadeIn();
} else {
$('.nav-main').fadeOut();
}
});
});
Answered By - Alexandr Lazarev
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.