Modification javascript SimpleNav avec position fixed on scrollTop

Bonjour,

Je souhaite combiner le comportement d'une barre de navigation (Javascript SimpleNav), et le script JQuery suivant :

	$(window).scroll(function() {
		if($(window).scrollTop() >= 438){
		$(".nav").css({position:"fixed",top:"0"});
		} else {
		$(".nav").css("position","relative");			
		}
	});

Le code de SimpleNav :

	var n = document.getElementById('navigation');
	n.classList.add('is-closed');
	function navi() {
		if (window.innerWidth<768 && document.getElementById("toggle-nav")==undefined) {			
			n.insertAdjacentHTML('afterBegin','<button id="toggle-nav"><i class="visually-hidden">Déplier/replier le menu</i></button>');
			t = document.getElementById('toggle-nav');  
			t.onclick=function(){ n.classList.toggle('is-closed');}
		} 
		if (window.innerWidth>=768 && document.getElementById("toggle-nav")) {
			document.getElementById("toggle-nav").outerHTML="";
		}
	}
	navi();
	window.addEventListener('resize', navi);

Si la fenêtre est plus large que 768px, et que le scroll est supérieur à 438px, alors on agrafe le menu avec

position: fixed

.
En revanche, si la largeur de la fenêtre est inférieur à 768px, le menu reste en

position:relative

quel que soit le scroll...

Quelqu'un peut-il m'aider ?

$(window).scroll(function() {
   if ( $(window).width() >= 768 && $(window).scrollTop() >= 438){
   //        ^ la fenêtre est plus large que 767px
      $(".nav").css({position:"fixed",top:"0"});
   } else {
      $(".nav").css("position","relative");			
   }
});

devrait suffire.
Sinon, ne déclencher l'écouteur d'évènement que si la fenêtre est plus large que 767px est plus performant :

if ( $(window).width() >= 768 ) {
   $(window).scroll(function() {
     if ( $(window).scrollTop() >= 438 ){
...

Modifié par Freez (08 Feb 2015 - 16:25)

Merci Freez, ça fonctionne bien à présent
Très bonne soirée !