Comment construire flottante, barre de menus lorsque vous faites défiler vers le bas

Envelopper votre menu dans un div ou de l'article avec un ID ou une classe.

#yourID.fixed {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    border-bottom: 5px solid #ffffff;
}

//STICKY NAV
$(document).ready(function () {  
  var top = $('#yourID').offset().top - parseFloat($('#yourID').css('marginTop').replace(/auto/, 100));
  $(window).scroll(function (event) {
    //what the y position of the scroll is
    var y = $(this).scrollTop();

    //whether that's below the form
    if (y >= top) {
      //if so, ad the fixed class
      $('#yourID').addClass('fixed');
    } else {
      //otherwise remove it
      $('#yourID').removeClass('fixed');
    }
  });
});

Ne me souviens pas où je l'ai obtenu à partir, donc pas de salutations pour moi, mais il a travaillé pour moi.

Essayer cette

CSS

* {margin: 0; padding: 0; outline: 0;}
body {
font-family: Helvetica, Arial, Verdana, sans-serif;
color: #999;
font-size: 12px;
background:#bfbfbf;
}
h1, h2 {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
margin:0 0 15px 0;
}
h1 {
font-size: 36px;
letter-spacing: -2px;
line-height: 100%;
}
h1.title {
font-size: 46px;
font-weight: 700;
color: #6a6a6a;
}
h2 {
font-size: 24px;
}
p {
margin: 0 0 15px 0;
}
.menuBtn {
background: center center no-repeat transparent;
background: #000;
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 10px;
}
.clear {
clear: both;
}
.wrap {
/*background:url(../images/bg.png) top left repeat-x;*/
width: 100%;
max-width: 1140px;
min-width: 960px;
z-index: 10;
position: relative;
margin: 0 auto;
padding: 0;
}
.section {
width: 100%;
max-width: 1140px;
min-width: 960px;
z-index: 10;
position: relative;
margin: 0 auto;
padding: 0 0 20px 0;
}
.inner {
width: 960px;
margin: 0 auto;
position: relative;
min-height: 50px;
padding:30px 0;
font-size: 18px;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
padding:30px 0;
}
/* This is the selector i used for my menu, it needs to be set as position:absolute; */
.subMenu {
position: absolute;
top: 462px;
height: 50px;
z-index: 1000;
width: 100%;
max-width: 1140px;
min-width: 960px;
background: #aabd46;
}
.subMenu .inner {
padding:0;
font-weight: 400;
}
.subNavBtn {
display: block;
height: 35px;
width: 12%;
float: left;
margin: 0px 0px 0 0;
text-decoration: none;
font-size: 14px;
padding: 15px 2% 0 2%;
text-align: center;
color: #fff;
}
.end {
margin: 0;
}
/* SECTIONS */
.sTop {
min-height: 630px;
background:#e5e5e5;
color:#3d3d3d;
}
.s1 {
min-height: 500px;
background: #2e2e2e;
}
.s2 {
min-height: 500px;
background: #3f3f3f;
}
.s3 {
min-height: 500px;
background: #504f4f;
}
.s4 {
min-height: 500px;
background: #6e87a1;
color: white;
}
.s5 {
min-height: 500px;
background: #293b4d;
color: white;
}

---

JavaScript

:

  (function(){
$.fn.smint = function( options ) {
//adding a class to users div
$(this).addClass('smint')
var settings = $.extend({
'scrollSpeed '  : 500
}, options);
return $('.smint a').each( function() {
if ( settings.scrollSpeed ) {
var scrollSpeed = settings.scrollSpeed
}
///////////////////////////////////
//get initial top offset for the menu 
var stickyTop = $('.smint').offset().top;   
//check position and make sticky if needed
var stickyMenu = function(){
//current distance top
var scrollTop = $(window).scrollTop(); 
//if we scroll more than the navigation, change its position to fixed and add class 'fxd', otherwise change it back to absolute and remove the class
if (scrollTop > stickyTop) { 
$('.smint').css({ 'position': 'fixed', 'top':0 }).addClass('fxd');
} else {
$('.smint').css({ 'position': 'absolute', 'top':stickyTop }).removeClass('fxd'); 
}   
};
//run function
stickyMenu();
//run function every time you scroll
$(window).scroll(function() {
stickyMenu();
});
///////////////////////////////////////
$(this).on('click', function(e){
//gets the height of the users div. This is used for off-setting the scroll so th emenu doesnt overlap any content in the div they jst scrolled to
var selectorHeight = $('.smint').height();   
//stops empty hrefs making the page jump when clicked
e.preventDefault();
//get id pf the button you just clicked
var id = $(this).attr('id');
//gets the distance from top of the div class that matches your button id minus the height of the nav menu. This means the nav wont initially overlap the content.
var goTo =  $('div.'+ id).offset().top -selectorHeight;
//Scroll the page to the desired position!
$("html, body").animate({ scrollTop: goTo }, scrollSpeed);
}); 
});
}
})();

---

HTML

<!DOCTYPE html>
<html>
<head>
<title>SMINT Demo</title>
<meta name = "keywords" content = "" />
<meta name = "description" content = "" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1 user-scalable=no">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'>
<link href="css/demo.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript"  src="js/jquery.smint.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('.subMenu').smint({
'scrollSpeed' : 1000
});
});
</script>
</head>
<body>
<div class="wrap">
<div class="subMenu" >
<div class="inner">
<a href="#" id="sTop" class="subNavBtn">Home</a> 
<a href="#" id="s1" class="subNavBtn">About me </a>
<a href="#" id="s2" class="subNavBtn"> Portfolio</a>
<a href="#" id="s3" class="subNavBtn">Working</a>
<a href="#" id="s4" class="subNavBtn">Hello</a>
<a href="#" id="s5" class="subNavBtn end">lets go</a>
</div>
</div>
<div class="section sTop">
<div class="inner">
<h1>Welcome to my site </h1>
<p>Click the links below !</p>
</div>
<br class="clear">
</div>
<div class="section s1">
<div class="inner">
<h1>About me </h1>
</div>
</div>
<div class="section s2">
<div class="inner">
<h1>Portfolio</h1>
</div>
</div>
<div class="section s3">
<div class="inner">
<h1>Working Standards</h1>
</div>
</div>
<div class="section s4">
<div class="inner">
<h1>Hello</h1>
</div>
</div>
<div class="section s5">
<div class="inner">
<h1>Lets Go</h1>
</div>
</div>
</div>
</body>
</html>

Dans l'URL que vous fournissez, je vois une barre de menu fixe sur le haut du navigateur pendant que vous faites défiler vers le bas plusieurs lignes de la page.

J'ai donc séparé de votre problème à 2 questions:
Tout d'abord, comment faire un fixe de menu du haut, ce qui ne sera pas disparaître lorsque défiler la page.
Deuxièmement, comment faire un menu fixe sur le dessus après le défilement vers le bas quelques lignes.

Pour la première question, j'ai changer votre code css.

#menucontainer {
float:top;
position:fixed;
top:0;
height: 100px;
width: 100%;
background-color: eeee00; /* makes other content won't be seen when the page scrolling */
}

Et je pense que la deuxième question, besoin d'écrire js. Eh bien, je ne sais pas encore.