Barre de navigation bloquer en position haute

Résolu/Fermé

Utilisateur anonyme - 1 mars 2016 à 12:01
Utilisateur anonyme - 2 mars 2016 à 11:37

Bonjour,
j'essaye d'adapté ce script :
http://www.sutanaryan.com/wpcp/Tutorials/fixed-menu-when-scrolling-page-with-CSS-and-jQuery/
avec le miens mais je n'y arrive pas. J'ai refais tout mon code plusieurs fois et je n'arrive toujours pas à avoir le JavaScript fonctionnel pourtant il me "semble" bon..

HTML :

<html>
<head>
   <meta charset="utf-8"/>
   <link rel="stylesheet" type="text/css" href="css/style.css">
   <title>TITRE ICI</title>
      <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script type="text/javascript">
            var _rys = jQuery.noConflict();
            _rys("document").ready(function(){
                  _rys(window).scroll(function () {
                        if (_rys(this).scrollTop() > 93) {
                              _rys('.menu').addClass("f-nav");
                        } else {
                              _rys('.menu').removeClass("f-nav");
                        }
                  });
            });
      </script>
</head>
<body>
<div id="scrollbar">
      <div class="vertical">
            <div id='header'>
<!--banner-->
                  <div id="banner">
                        <div class="logohover" onClick="window.open('random.html','_blank');"></div>
                        <div class="logo"></div>
                  </div>
<!--menu-->
                  <div class="menu">
                        <div class="menuDIV" onClick="self.location.href='#';"> 1 </div>
                        <div class="menuDIV" onClick="self.location.href='#';"> 2 </div>
                        <div class="menuDIV" onClick="self.location.href='#';"> 3 </div>
                        <div class="menuDIV" onClick="self.location.href='#';"> 4 </div>
                  </div>
            </div>
<!--body-->
            <div id="frame">
                  <div class="spacer"></div>
            </div>
      </div>
</div>
</body>
</html>

CSS :

body{
	padding:0;
	margin:0;
	top:0;
	overflow-x: hidden;
	overflow-y: hidden;
}

p{
	margin:0;
	margin-top: 0;
}

.f-nav{ z-index: 9999; position: fixed; top: 0; width: 100%;}

#header{
	z-index : 0;
 	width: 100%;
 	-moz-transition: .5s;
	-webkit-transition: .5s;
	transition: .5s;
}

#header:hover{
 	width: 95.5%;
 	-moz-transition: .5s;
	-webkit-transition: .5s;
	transition: .5s;
}

	#banner{
		top:10;
		height:10%;
		background-image:url(images/banner.jpg);
		background-position: right;
	}

	#banner .logo{
		z-index : -1;
		content:url(images/logo.jpg);
		position: absolute;
		left: 95.5%;
		top:0;
	}
	#banner .logohover{
		opacity: 0;
		content:url(images/logo.jpg);
		position: absolute;
		left: 95.5%;
		top:0;
		-moz-transition: .1s;
		-webkit-transition: .1s;
		transition: .1s;
	}

	#banner .logohover:hover{
		opacity: 100;
		-moz-transition: 1s;
		-webkit-transition: 1s;
		transition: 1s;
	}

.menu{
	height:4.4%;
	top:10%;
	position: absolute;
	width: 100%;
}

		.menu .menuDIV{
			margin:0;
 			padding:0;
 			float:left;
 			background-color:#3f3f3f;
 			cursor:default;
 			width: 25%;
 			height: 100%;
 			color:white;
 			text-decoration:none;
 			text-align:center;
 			line-height:43px;

 			-moz-transition: .5s;
			-webkit-transition: .5s;
			transition: .5s;
			}

			.menu .menuDIV:hover {
 			background-color:#939393;
 			cursor:default;

 			-moz-transition: .5s;
			-webkit-transition: .5s;
			transition: .5s;
		}

#frame{
	margin-top: 2.25%;
	height:84.6%;
}

#scrollbar .vertical {
	width: 100%;
	height: 100%;
	overflow: auto;
	position: absolute;
	overflow-x: hidden;
	}
#scrollbar .horizontal {
	overflow-x: scroll;
	overflow-y: hidden;
}
#scrollbar .horizontal p {
	width: 1000px; 
}
#scrollbar ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
 
#scrollbar ::-webkit-scrollbar-track {
    background-color: #4f4f4f;
    border-radius: 5px;
}
 
#scrollbar ::-webkit-scrollbar-thumb {
    background-color: #ba605e;
    border-radius: 5px;
}

#scrollbar ::-webkit-scrollbar-corner {
}

.spacer{
	padding:700px;
}

Merci de m'aider à trouver la solution :)

A voir également:

Barre de navigation bloquer en position haute
Navigation privée - Guide
Bloquer pub youtube - Guide
Partage de position - Guide
Que doit-il faire pour effacer les traces de sa navigation ? - Guide
Windows 11 barre des taches a gauche - Guide

2 réponses

Réponse 1 / 2

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
1 mars 2016 à 16:56

Salut,

Le problème de détection du scroll de la fenêtre vient du fait que tu as désactiver le scroll document (body { overflow: hidden; }) pour le mettre ton wrapper #scrollbar .vertical.
Dans ta fonction jQuery, il faut donc appliquer l'événement scroll sur ce wrapper au lieu de window (ou remettre le scroll du document).

Un deuxième problème vient du code css des deux classes .f-nav et .menu. Ces deux classes ont le même poids dans ta feuille de style mais .menu étant placé après .f-nav, c'est donc .menu qui va surcharger la classe .f-nav et non l'inverse comme tu le souhaite.
Il faut donc soit déplacer le code css de la classe .f-nav après le code de .menu, ou alourdir le poids du bloc .f-nav en le renommant par exemple .menu.f-nav (sans espace entre les deux : élément qui possède à la fois la classe menu et la classe f-nav).

Bonne journée

Réponse 2 / 2

Utilisateur anonyme
1 mars 2016 à 17:29

rebonjour,

j'ai corrigé tout ce que tu m'as dis mais je comprend pas quand tu dis "il faut donc appliquer l'événement scroll sur ce wrapper au lieu de window".

Je suis sur que tu as vu que je suis débutant et donc j'ai pas tout les termes en tête, tu entend quoi par "wrapper" ?

Merci

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
2 mars 2016 à 09:31

Un wrapper est simplement un conteneur. L'élément .vertical sert uniquement à contenir l'ensemble de la page afin de pouvoir y appliquer le scroll.

Il faut donc appliquer l'événement scroll sur cet élément ;)

_rys('.vertical').scroll(function () {

Utilisateur anonyme > Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022
2 mars 2016 à 11:37

MERCI BEAUCOUP :DDDD

Discussions similaires

Barre de navigation outlook

Barre verticale droite sur clavier

Barre verticale droite sur clavier mac

[Navigation Internet] Trace de navigation

Alt + = un égal barré = différence !

Discussions similaires

Newsletters