11548 sujets

JavaScript, DOM et API Web HTML5

Positionner un element html selon le scroll

Bonjour,

voilà je cherche à avoir un bloc html qui se positionne en haut de la page lorsque l'on scroll.

J'utilise jquery mais j'ai un petit soucis.

voilà déjà le code.


var $scrollingDiv = $('#scrollingDiv');
$(window).scroll(function(){
$scrollingDiv
.stop()
.animate({'top': ($(window).scrollTop())  + 'px'}, 'slow' );
});


Ca fonctionne bien sauf qu'au départ mon bloc html est positionné à une certaine hauteur dans la page et quand je remonte le scroll il va se placer tout en haut de la page.

Je voudrais donc que le bloc descende dans la page quand le scroll dépasse sa position de départ et qu"il reprenne sa position initiale quand le scroll est tout en haut.

J'espère que c'est assez clair ^^

Merci pour votre aide.

un exemple de ce que je veux faire ici :

http://www.sushishop.fr/selection-sushi/10 , le panier à gauche.
re,

j'ai bricolé ça :


var $scrollingDiv = $('#scrollingDiv');
$(window).scroll(function(){
if($(window).scrollTop()> 300){
$scrollingDiv
.stop()
.animate({'top': ($(window).scrollTop())  + 'px'}, 'slow' );
}else{
$scrollingDiv
.stop()
.animate({'top':  '286px'}, 'slow' );
}
});


ça fonctionne mais c'est pas propre je pense ? Smiley confused

Un autre problème apparait lorsque je met à jour le bloc via un formulaire, la page et le bloc reviennent tout en haut. Comment on peut garder la position de la page générale et du bloc ? Merci ! (si je trouve entre temps , je mettrai la solution)
Bonjour.

Tu cherches quelque chose dans ce goût là : Sticky Sidebar jQuery plugin?

Avis perso : je m'abstiendrais d'utiliser ce genre d'effet et m'en tiendrais au positionnement fixed. Utiliser l'event scroll tue les performances, et ce genre d'effet est extrêmement agaçant.
Sujet clos
Aller à