Menu qui "descend" lors du scroll

Fermé

Eritou Messages postés 110 Date d'inscription samedi 20 décembre 2014 Statut Membre Dernière intervention 29 septembre 2023 - 17 juil. 2015 à 19:50
Eritou Messages postés 110 Date d'inscription samedi 20 décembre 2014 Statut Membre Dernière intervention 29 septembre 2023 - 18 juil. 2015 à 16:32

Bonsoir à tous,
J'ai une barre des menus à hauteur top: -40 que j'aimerais à top:0 (en transition) lors d'un scroll à 100%.
J'ai chopé ce script :

   <script>
 
var scr_top={
 
diff:0,
vitesse:0,
inter:'',
duree:0.5, 		//duree en seconde
btn_vue:1000,		//moment ou le bouton est affiché
 
	init:function(){
 
		clearInterval(this.inter);
 
		this.diff=document.documentElement.scrollTop || document.body.scrollTop;
 
		this.vitesse=Math.round(this.diff/(50*this.duree));
 
		this.inter=setInterval(scr_top.lance_scroll,100);
	},
 
	lance_scroll:function(){
 
		var ddl=(navigator.vendor) ? document.body : document.documentElement;
 
		if(scr_top.diff-scr_top.vitesse<=0){
 
			ddl.scrollTop=0;
			clearInterval(scr_top.inter);
			return false;
		}
		ddl.scrollTop-=scr_top.vitesse;
		scr_top.diff-=scr_top.vitesse;
	},
 
	tombou:function(){
 
		var hauteur_scroll=document.documentElement.scrollTop || document.body.scrollTop;
 
		hauteur_scroll>scr_top.btn_vue ? document.querySelector("#menu").style.opacity=1 : document.querySelector("#menu").style.opacity=0;
	}
}
 
typeof window.addEventListener == 'undefined' ? attachEvent("onscroll",scr_top.tombou) : document.addEventListener("scroll",scr_top.tombou, false);
 
 
</script>

Seul "soucis" : la barre des menus est affichée à l'ouverture de la page (quand le top est à 0) pour disparaître dès le début d'un scroll... pour réapparaître lorsqu'on scroll de 1000px. Si une personne à la solution et une idée pour la transition top:-40px>top:0px lors d'un scroll à 100%.
Une petite idée de ce que j'aimerais pouvoir faire :
http://ww7.cmsbluetheme.com
Merci pour votre aide et bon week-end,
E.

A voir également:

Menu qui "descend" lors du scroll
Menu déroulant excel - Guide
Windows 11 menu démarrer classique - Guide
Canon quick menu - Télécharger - Utilitaires
Réinitialiser menu démarrer windows 10 - Guide
Télécommande tcl touche menu - Forum Téléviseurs

1 réponse

Réponse 1 / 1

Eritou Messages postés 110 Date d'inscription samedi 20 décembre 2014 Statut Membre Dernière intervention 29 septembre 2023 4
18 juil. 2015 à 16:32

Bonjour à tous,
Pourquoi faire simple quand on peut faire compliqué :/
Ce petit script suffit à cacher/afficher :

<script>
$("#menu").hide();
$(window).scroll(function() {
    if ($(window).scrollTop() > 1000) {
        $("#menu").fadeIn("slow");
    }
    else {
        $("#menu").fadeOut("fast");
    }
});
</script>

Manque l'effet du menu qui descend :(
Avec un classe au menu de top: -60, j'ai bien essayé ceci :

 $("#menu").fadeIn("slow").top("slow") = "0px";

Mais cela ne fonctionne pas (je débute en js).
Merci pour votre aide et bon week-end,
E.

Discussions similaires