[RESOLU] Menu suivant le scroll

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : [RESOLU] Menu suivant le scroll

Re: Menu suivant le scroll

par BaLiSTiK » 02 avr. 2014, 14:09

width: 100%; dans le .navbar.floatable
^^

Re: Menu suivant le scroll

par TiPunK » 02 avr. 2014, 14:00

width: 100%; dans le .navbar.floatable

Re: Menu suivant le scroll

par BaLiSTiK » 02 avr. 2014, 14:00

Problème solutionné par un de mes amis...suffit d'ajouter "width : 100%;"...voila désolé pour le dérangement :D

Menu suivant le scroll

par BaLiSTiK » 02 avr. 2014, 13:31

Bonjour,

Me faisant un petit site perso décrivant mon CV, j'ai mon menu placé après ma bannière dans le header et j'aimerai qu'il se place en haut automatiquement lorsqu'on commence à scroller. J'ai parfaitement réussi à le faire, mais par contre, il se place sur la gauche, plutot que de prendre toute la largeur de la page et je ne sais pas trop comment modifier le CSS du coup.
Mon menu est créé à partir de Zend_Navigation() sur lequel j'applique du CSS de Twitter Bootstrap.

le code HTML:
<nav role="navigation" class="navbar navbar-default" style="margin-bottom : 0;">
	<div class="container">
		<div id="navbarCollapse" class="collapse navbar-collapse">
			<?php
				echo $this->navigation($this->tabNavigationHeader)->menu();
			?>
		</div>	
	</div>		
</nav>
le code JS :
[javascript]
$(document).ready(function(){
var positionElementInPage = $('.navbar').offset().top;
$(window).scroll(
function() {
if ($(window).scrollTop() >= positionElementInPage) {
// fixed
$('.navbar').addClass("floatable");
} else {
// relative
$('.navbar').removeClass("floatable");
}
}
);
});
[/javascript]

et le code CSS qui doit prendre le pas lors du scroll :
.navbar.floatable {
    position: fixed;
    top : 0;
    margin : auto;
    z-index : 10000;
}
Concernant le code de la navbar, malheureusement je n'ai que le fichier bootstrap.min.css :/ mais l'url est à cette page : http://cv.fonfonland.fr/emplois

Merci d'avance :)