Repositionner div suivant le scroll en jquery
Pierrot 81
-
Super_carotte Messages postés 1420 Date d'inscription Statut Membre Dernière intervention -
Super_carotte Messages postés 1420 Date d'inscription Statut Membre Dernière intervention -
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>
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>
A voir également:
- Repositionner div suivant le scroll en jquery
- Scroll lock - Forum Windows
- Touche scroll lock ✓ - Forum Excel
- Div c++ - Télécharger - Langages
- Touche "scroll lock" - Forum Windows
- Le mode suivi des modifications - Guide
3 réponses
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>
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.
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.
Bonjour,
J'ai trouvé une solution:
https://desgeeksetdeslettres.com/web/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 ;)
J'ai trouvé une solution:
https://desgeeksetdeslettres.com/web/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 ;)