How to make sticky menu?

Question

How do I make a menu like on this website? www.awwwards.com

When scrolling the page with the mouse, the menu will stay at the top and its color will change too. The menu before scroll and after scroll has a different color.

I found a tutorial on the internet but it just had the same color when page is scrolled. Could someone tell me how to change the color?

.menutext {
  float: left;
  border-bottom:1px solid #d2d6d5;
  width: 100%;
  background:gray; }
.menutext ul {
  margin: 0 0 0 10%; }
.menutext ul li {
  float: left;
  position: relative;
  border-left: none;
  list-style: none; 
}
.menutext li a {
  text-decoration: none;
  color: #444;
  display: inline-block;
  font-size: 14px;
  font-family: MuseoSans, serif;
  text-transform: uppercase;
  padding:10px;
  border-right: 1px solid #d2d6d5;
  text-align: center;
}
.menutext ul li :hover {
  color:#919191;
  background-color: #f4f4f4;
}

js

$(document).ready(function() {
  // Menentukan elemen yang dijadikan normal yaitu .normal
  var normalNavTop = $('.menutext').offset().top; 
  var normalNav = function(){
    var scrollTop = $(window).scrollTop();  
    // Kondisi jika discroll maka .nav ditambahkan class normal dan sebaliknya      
    if (scrollTop > normalNavTop) { 
        $('.menutext').css({ 'position': 'fixed', 'top':0, 'left':0, 'z-index':9999 });
    } else {
      $('.menutext').css({ 'position': 'relative' });
    }
  };

  // Jalankan fungsi
  normalNav();
  $(window).scroll(function() {
    normalNav();
  });
});

html

<div id="menu">
<div class="menutext">
    <ul>
        <li><a href="#">home</a>
        </li>
        <li><a href="#">about</a>
        </li>
        <li><a href="#">product</a>
        </li>
    </ul>
</div>

Full code here

Sorry, this is not what Stackoverflow is for. If you have a specific problem with **your** implementation, show us what you have. If what you have is the code that is already there (at the time of writing) then you're asking us to do the work for you. Please read the [How do I ask a good question](http://stackoverflow.com/help/how-to-ask) section in the help — freefaller, Apr 09 '15 at 15:56
possible duplicate of [Sticky header CSS / JS](http://stackoverflow.com/questions/6913086/sticky-header-css-js) — TylerH, Apr 09 '15 at 15:57
[Use position fixed.](http://jsfiddle.net/jbutler483/vLubg8pg/1/) for the 'sticky menu'. For the colour change on scroll, look that up on google (there's loads of stuff on that). — jbutler483, Apr 09 '15 at 15:58
@Sufi, there's a big difference between somebody who can't help, and somebody who doesn't want to. With 18 years of professional programming behind me I think I fall into the latter category. Now you've provided some evidence of your own work, I'll have another look — freefaller, Apr 09 '15 at 17:29
I can't see much wrong with your code - I would suggest that instead of applying the CSS directly, you take the approach provided by vihan1086 in their answer and use CSS classes instead. That will allow you much greater control, including the formatting of elements *within* your fixed header element — freefaller, Apr 09 '15 at 17:33

score 8 · Answer 1 · answered Apr 09 '15 at 15:58

$(window).scroll(function () {
  if($(window).scrollTop() > 20) {
    $("#head").addClass('sticky');
  } else {
    $("#head").removeClass('sticky');
  }
});

html,body {
  margin: 0;padding: 0;
  height: 300%;
}
  
#top {
  height: 20px;
  width: 100%;
}

#head {
  width: 100%;
  height: 50px;
  background-color:gray;
}

.sticky {
  position: fixed;
  top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="top">Blah blah</div>
<div id="head">Sticky Header</div>

How to make sticky menu?

1 Answers1