web-dev-qa-db-fra.com

Comment faites-vous suivre une div lorsque vous faites défiler?

J'ai un div sur le côté gauche qui inclut les heures de bureau et la météo. Je voudrais que cette div défile de haut en bas en fonction de la manière dont l'utilisateur défile. Donc, il suivrait et se déplacerait de haut en bas avec la page. Comment pourrais-je tenter cela? Ceci est mon site web judystropicalgarden.com

Merci

htmlscroll
49
user1165861

Vous pouvez soit utiliser la propriété css Fixed, ou si vous avez besoin de quelque chose de plus précis, vous devez utiliser javascript et suivre la propriété scrollTop qui définit l'emplacement de la barre de défilement de l'agent d'utilisateur (0 étant au sommet ... et x étant au fond)

.Fixed
{
    position: fixed;
    top: 20px;
}

ou avec jQuery:

$('#ParentContainer').scroll(function() { 
    $('#FixedDiv').css('top', $(this).scrollTop());
});
71
Feisty Mango

Vous pouvez utiliser la propriété de position fixed CSS pour accomplir cela. Il existe un tutoriel de base sur ce ici .

EDIT: Cependant, cette approche n’est PAS supportée par IE versions <IE7, et seulement dans IE7 si elle est en mode standard. Ceci est discuté plus en détail ici =.

Il existe également un hack, expliqué ici , qui montre comment effectuer un positionnement fixe dans IE6 sans affecter le positionnement absolu. Quelle version de IE ciblez-vous votre site Web?

12
SuperTron

À l'aide du style CSS, vous pouvez définir le positionnement de quelque chose. Si vous définissez l'élément comme fixe, il restera toujours au même endroit sur l'écran à tout moment.

div
{
    position:fixed;
    top:20px;
}
12
Arcym

Une meilleure réponse de JQuery serait:

$('#ParentContainer').scroll(function() { 
    $('#FixedDiv').animate({top:$(this).scrollTop()});
});

Vous pouvez également ajouter un nombre après scrollTop, c'est-à-dire .scrollTop () + 5, pour lui donner un effet buff.

Une bonne suggestion serait aussi de limiter la durée à 100 et de passer du swing par défaut à l’assouplissement linéaire.

$('#ParentContainer').scroll(function() { 
    $('#FixedDiv').animate({top:$(this).scrollTop()},100,"linear");
})
8
Salteris

la propriété : fixed; devrait faire le travail, je l'ai utilisée sur mon site Web et cela a fonctionné correctement. http://www.w3schools.com/css/css_positioning.asp

4
droidDEXTER