Position fixe sur un certain point
je vais avoir des ennuis avec la position d'un div.
J'aimerais que ce div être la position relative jusqu'à ce que la page a fait défiler un certain nombre de pixels.
Dans les détails, j'ai un div(#bloc-menu) qui est presque 300px en bas de la page, je veux qu'il devienne fixe quand il frappe le haut.
J'ai essayé d'utiliser ce code, mais ne semble pas fonctionner correctement...
var header = $("#block-menu");
$(document).scroll(function(e) {
if($(this).scrollTop() >= 300 {
header.css({position: "fixed", "top" : "0"});
} else {
header.css("position", "relative");
}
});
</script>`
le CSS:
#block-menu {
background: rgb(27, 85, 131);
position: relative;
}
le code HTML:
<div id="#first-block" height="100px"></div>
<div id="second-block" height="200px"></div>
<div id="block-menu"></div>
<div id="container"></div>
- "mais ne semble pas fonctionner correctement...", ce Qui signifie???
- Je ne sais pas, quelque chose comme cela ressemble, ne fonctionne pas comme il devrait, je pense..j'essaie de comprendre comme je peux 😉 merci aussi
Vous devez vous connecter pour publier un commentaire.
Est-ce ce que vous essayez de faire?
http://jsfiddle.net/vyHQC/
JS
CSS
HTML
Pourquoi ne pas utiliser un plugin qui travaillent déjà et est déjà testé dans tous les navigateurs, pour le faire?
http://stickyjs.com/
jQuery
au lieu de$
cela rendra le plugin fonctionne, mais votre page est un tas de position absolue, vous devriez jeter un oeil sur votre balisage de nouveau.Ligne
if($(this).scrollTop() >= 300 {
manque un près de fixation pour un début.J'ai fait une version de travail basé sur votre exemple de code:
http://jsfiddle.net/DaveHogan/76kdr/2
En bref, je devine que vous avez besoin d'un
$(document).ready(function(){
et manque un crochet ferméif($(this).scrollTop() >= 300 {
devrait être
if($(this).scrollTop() >= 300) {