Posez votre question Signaler

Repositionner div suivant le scroll en jquery

Pierrot 81 - Dernière réponse le 19 oct. 2012 à 13:21
Bonjour,
j'ai trouvé un script pour repositionner une div en haut de la fenetre suivant le scroll comme dans cet exemple la div panier qui suit le scroll :
http://www.sushishop.fr/catalogue-produit-sushi-Accompagnements/10
j'ai trouvé ce code en cherchant mais je n'arrive pas à le faire fonctionner, pouvez vous m'aider merci :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Albi Commerces style</title>
<style>
body {
background-color: #000000;
margin: 0;
overflow: auto;
padding: 0;
text-align: center;
}
#conteneur {
margin-right: auto;
margin-left: auto;
height: 1800px;
width: 960px;
}
#header {
width: 960px;
width: 173px;
}
#scrollingDiv {
width: 250px;
height: 200px;
border: 2px solid white;
color: white;
}
</style>
<script type="text/javascript">
$(window).scroll(function(){
$("#scrollingDiv")
.stop ();
.animate({"marginTop": ($(window).scrollTop() + 50) + "px"}, "slow" );
})
</script>
</head>
<body class="bg">
<div id="conteneur">
<div id="scrollingDiv"> Contenu du layer </div>
</div>
</body>
Lire la suite 
Réponse
+1
moins plus
Essaye avec ça ...

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Albi Commerces style</title> 

<style> 
body { 
	background-color: white; 
	margin: 0; 
	overflow: auto; 
	padding: 0; 
	text-align: center; 
} 
#conteneur { 
	margin-right:0; 
	margin-left:0; 
	height: 1800px; 
	width: auto; 
} 

#scrollingDiv { 
	float:right;
	margin-top:10px;
	margin-right:20px; 
	width: 250px; 
	height: 200px; 
	border: 1px solid grey; 
	color: grey; 
} 
</style> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$(window).scroll(function(){ 
	$("#scrollingDiv").stop(); 
	$("#scrollingDiv").animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "slow"); 
});
</script> 
</head> 

<body> 

<div id="conteneur"> 
	<div id="scrollingDiv"> Contenu du layer </div> 
</div> 

</body>
</html>
Ajouter un commentaire
Annonces
 
moins plus
Réponse
+0
moins plus
Est ce que tu as inclus le framework ??
Ajouter un commentaire
Annonces
 
moins plus
Réponse
+0
moins plus
Bonjour,
Merci pour ta réponse Joos.

Je me permet de remonter le sujet car j'ai un soucis très similaire.
Ta réponse répond a mes soucis sauf un:
Comme on peut le voir, sur le site cité en exemple:
http://www.sushishop.fr/catalogue-produit-sushi-Accompagnements/10
la div panier suit le scroll, mais elle a une particularité que je recherche:

Le panier est sous le header mais des que l'on scroll vers le bas, le div se place en haut du navigateur.
C'est exactement ce que je cherche.
Or, le code fournis par joos laisse tout le temps un espace en haut du navigateur.

Quelqu'un aurait-il une solution pour ça?

Merci.
Super_carotte 1422Messages postés mardi 8 janvier 2008Date d'inscription 27 janvier 2015Dernière intervention - 18 oct. 2012 à 17:10
Bonjour,
J'ai trouvé une solution:
http://desgeeksetdeslettres.com/blog/programmation-java/menu-fixe-mais-flottant-selon-la-scrollbar-js-css
Mais il reste a ajouter l'effet de déroulement lent qui est sympa dans l'exemple de Joos ;)
Répondre
JooS 2480Messages postés mardi 22 janvier 2008Date d'inscription 22 octobre 2014Dernière intervention - 19 oct. 2012 à 01:45
Ben il suffit d'enlever le " + 30 " ou de diminuer la valeur !
Répondre
Super_carotte 1422Messages postés mardi 8 janvier 2008Date d'inscription 27 janvier 2015Dernière intervention - 19 oct. 2012 à 13:21
En enlevant le +30, le div va passer par dessus le header il me semble. Or, ce n'est pas ce que je souhaitai.
Mais en jouant sur les deux codes fourni, je suis parvenu a gérer cette particularité.
Merci a vous :)
Répondre
Ajouter un commentaire
Ce document intitulé «  repositionner div suivant le scroll en jquery  » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes.

Le fait d'être membre vous permet d'avoir des options supplémentaires.