Fixed menu after scrolling

Navigation
1

I want to make the menu stay fixed after some scrolling, 

 <script>
    $("document").ready(function($){
        var nav = $('.menu-topo');

        $(window).scroll(function () {
            if ($(this).scrollTop() > 150) {
                nav.addClass("fixo");
            } else {
                nav.removeClass("fixo");
            }
        });
    });
</script>

and html 

<div id="menu-topo">asdasdasd</div>

It's not getting fixed. What's wrong?

    
asked by anonymous 09.11.2017 / 19:49

2 answers

1

You are using menu-topo as id and the selector is looking for class .menu-topo instead of #menu-topo .

    
09.11.2017 / 20:38
0

There is a much easier and simpler way of doing this using only a css property called Position: sticky . 

div.sticky {
   position: -webkit-sticky;
   position: sticky;
   top: 0;
   padding: 5px;
   background-color: #cae8ca;
   border: 2px solid #4CAF50;
}

<div class="sticky">MENU</div>
    
28.01.2018 / 17:11
Automating deploy using MSBuild PartialView relationships asp.net mvc 5