Menu whant get fixed to the top on scroll

Question

I'm trying to accomplish a simple effect of sticking the menu to top of the browser window when scrolling passes a certain point, but something went wrong and the menu wont get fixed to the top. From the libraries I'm using jQuery and animate it. My code is as follows:

HTML:

<nav class="animatedParent">
    <ul class="animated bounceInUp delay-750">
        <li class="animated"><a href="#">O meni</a></li>
        <li class="animated"><a href="#">Katalog</a></li>
        <li class="animated"><a href="#">Razno</a></li>
    </ul>
</nav>

CSS:

.fixedNav {
    display: block;
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba( 0, 0, 0, .8);
    height: 100px;
}

nav {
    width: 400px;
    margin:  20px auto;
}

nav ul {
    list-style: none;
}

nav ul li {
    float: left;
    overflow: auto;
    width: 130px;
}

nav ul li a {
    font-size: 35px;
    font-family: 'Indie Flower', cursive;
    color: #fff;
    cursor: pointer;
    transition: 500ms linear all;
}

nav ul li a:hover {
    color: #123456;
    transition: 500ms linear all;
}

JS (jQuery):

$(document).ready(function(){
    $("nav ul li").mouseenter(function() {
        $(this).addClass("wiggle");
    });
    $("nav ul li").mouseleave(function() {
        $(this).removeClass("wiggle");
    });

    var nav = $("nav").offsetTop();
    if($(window).scrollTop() > nav) {
        $("nav").addClass("fixedNav");
        console.log('Hello!');
    } else {
        $("nav").removeClass("fixedNav");
    }
});

Answer 1

You need to use the event scroll and check the offset there.

When the user is scrolling, toggleClass will add/remove the class based on the condition $window.scrollTop() > navOffset which will return true or false

var $window = $(window);
var $nav = $('nav');
var navOffset = $nav.offsetTop();

$window.on('scroll', function() {
  $nav.toggleClass('fixedNav', $window.scrollTop() > navOffset);
});

Answer 2

So first off, you only use the code once, which is when the document is loaded. You're going to want to check everytime you scroll the document as the code should obivously be triggered once you scroll a certain amount.

 $(document).scroll(function(){ var nav = $("nav").height(); if($(window).scrollTop() > nav) { $("nav").addClass("fixedNav"); } else { $("nav").removeClass("fixedNav"); } }); 

 body { background: black; height:700px; } .fixedNav { display: block; position: fixed; top: 0; width: 100%; background: rgba( 0, 0, 0, .8); height: 100px; } nav { display: block; height: 100px; width: 100%; margin: 20px auto; } nav ul { list-style: none; } nav ul li { float: left; overflow: auto; width: 130px; } nav ul li a { font-size: 35px; font-family: 'Indie Flower', cursive; color: #fff; cursor: pointer; transition: 500ms linear all; } nav ul li a:hover { color: #123456; transition: 500ms linear all; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav class="animatedParent nav"> <ul class="animated bounceInUp delay-750"> <li class="animated"><a href="#">O meni</a></li> <li class="animated"><a href="#">Katalog</a></li> <li class="animated"><a href="#">Razno</a></li> </ul> </nav> 

Answer 3

add an scroll event to check your scroll position

for example:

$(document).scroll(()=>{...});

like here

This is a very plain demo, it only demonstrate wha i meant

Answer 4

You can use a library like scrollMonitor to accomplish your task as scroll monitoring have its own caveats.

You can let scrollMonitor to lock position of your menu when it leaves viewport, something like this:

var $menu = document.querySelector('nav'); // It is better to use CSS class name instead
var watcher = scrollMonitor.create($menu);
watcher.lock();
watcher.exitViewport(function() {
    $menu.classList.add('fixedNav');
});
watcher.enterViewport(function() {
    $menu.classList.remove('fixedNav');
});

Please refer this example as it closely matches your task.

Answer 5

You don't fire the check for the current scroll on scroll event. That's an event you're looking for. Also you could check the scrollTop on the document (it's more error proof in jQuery), not on the window as it doesn't always work.

$(document).ready(function(){
  $("nav ul li").mouseenter(function() {
    $(this).addClass("wiggle");
  });
  $("nav ul li").mouseleave(function() {
    $(this).removeClass("wiggle");
  });
  $(document).on('scroll', function() {
      var nav = $("nav").offsetTop();
      if($(document).scrollTop() > nav) {
        $("nav").addClass("fixedNav");
        console.log('Hello!');
      } else {
        $("nav").removeClass("fixedNav");
      }
  })
});

Answer 6

That is what you are looking for:

 $(document).ready(function(){ $("nav ul li").mouseenter(function() { $(this).addClass("wiggle"); }) ; $("nav ul li").mouseleave(function() { $(this).removeClass("wiggle"); }) ; }); $(document).ready(fixedHeader) ; $(window).scroll(fixedHeader) ; function fixedHeader() { var nav = parseInt($("nav").css("margin-top")) ; if($(window).scrollTop() > nav) { $("nav").addClass("fixedNav"); } else { $("nav").removeClass("fixedNav"); } } 

 body{ height: 1000px; } .fixedNav { display: block; position: fixed; top: 0; width: 100%; background: rgba( 0, 0, 0, .8); height: 100px; } nav { width: 400px; margin: 20px auto; } nav ul { list-style: none; } nav ul li { float: left; overflow: auto; width: 130px; } nav ul li a { font-size: 20px; font-family: 'Indie Flower', cursive; color: #fff; cursor: pointer; transition: 500ms linear all; } nav ul li a:hover { color: #123456; transition: 500ms linear all; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav class="animatedParent"> <ul class="animated bounceInUp delay-750"> <li class="animated"><a href="#">O meni</a></li> <li class="animated"><a href="#">Katalog</a></li> <li class="animated"><a href="#">Razno</a></li> </ul> </nav>