Comment faire défiler un élément «fixe»

StackOverflow https://stackoverflow.com/questions/9383906

Question

Je sais que cela semble un peu contre-intuitif, mais laissez-moi vous expliquer ce que j'essaie de faire.

J'ai un gros élément qui sert d'arrière-plan. Il ne redimensionne pas. Il est souvent plus grand que l'écran sur lequel il est visualisé. La plupart du contenu de cet élément (c'est juste une image) se trouve près du centre. Disons que la seule information NÉCESSAIRE est au milieu 800px, et le tout fait 1600px de large.

Pourquoi est-il plus large que nécessaire? Parce qu'il se fond agréablement dans le reste de l'arrière-plan et ajoute à la conception du site.

J'ai donc fixé l'élément et utilisé une astuce standard pour le centrer. Cela fonctionne parfaitement sur un grand écran. Il reste centré, si une partie est un peu trop grande, cela ne vous permet pas de faire défiler pour voir ce qui n'est fondamentalement rien. J'aime ça.

Mais si l'écran est trop petit, vous ne pouvez pas tout voir. Vous ne pouvez pas simplement définir la largeur min ou la hauteur min de la page car lorsque vous faites défiler, l'image d'arrière-plan reste en place, car elle est fixe.

S'il y avait un moyen pour qu'un élément fixe se déplace réellement avec tout le reste lorsque la page défile, cela fonctionnerait parfaitement, car je pourrais spécifier la largeur minimale à la taille des éléments requis de l'image. Cela fonctionnerait très bien.

Sinon, une autre solution serait d'utiliser une autre forme de positionnement permettant d'éviter de pouvoir faire défiler pour voir le tout. Ensuite, encore une fois, je pourrais simplement définir le tout avec une largeur minimale, ce qui me permettrait de définir exactement la quantité de contenu pouvant être défilée.

Est-ce que tout cela est possible? J'ai l'impression de manquer quelque chose de simple. Idéalement, je n'aurais pas à redimensionner les images, à servir plusieurs feuilles de CSS, ou à utiliser un javascript élaboré ou quelque chose comme ça. Merci pour l'aide!

Était-ce utile?

La solution

J'ai finalement résolu ce problème après une tonne d'expérimentation et la solution s'est avérée être un CSS basique, ce qui est génial.

Je vais dans les moindres détails pour illustrer cette solution sur mon blog .Sinon, voici la démonstration fonctionnelle .

HTML 

<body>
 <div id="box">
  <div id="element"></div>
 </div>
</body>

CSS 

<style type="text/css">
html, body {
 height:100%;
}
body {
 margin:0px;
 padding:0px;
 min-width:1000px; /*Set the width you want to be able to scroll to here*/
}
#element {
 height:100%;
 position:relative; /*This section centers your element*/
 left:50%;
 margin-left:-800px; /*Half the width of the image*/
 z-index:-9999; /*This part puts it behind everything, not needed if you aren't making a background*/
 background:url(image.jpg) no-repeat;
}
#box {
 height:100%;
 min-height:700px; /*Set the height you want to be able to scroll to here*/
 overflow:hidden; /*Needed due to centering with margins*/
}
</style>

Autres conseils

Je sais que vous préféreriez ne pas utiliser de javascript élaboré .... la bibliothèque JQuery permet quelques petites corrections à des choses comme celle-ci avec un minimum de code ... vous pouvez également utiliser un extrait de code relativement petit sans jquery ... en gros, tout ce que vous avez à faire est de définir un écouteur d'événements pour window.scroll et de définir votre fixedElement.scrollTop pour qu'il corresponde ...

Exemple JQuery rapide: 

$(window).scroll(function(){
  $('#fixedBackground')[0].scrollTop=$(window).scrollTop();
});

Je ne suis pas CERTAIN Je sais exactement ce que vous voulez faire, mais l'extrait de code css ci-dessous pourrait vous aider.Je ne sais pas. 

 body{ background-image:url(../images/bgImage.png); 
 background-attachment:scroll; background-position:center top;
 background-repeat:no-repeat; margin-top:0px; margin-bottom:0px;}

Il serait utile que vous publiiez votre css pour ce que vous avez actuellement afin que nous puissions vraiment vous aider.Faites-moi savoir si je peux être plus clair.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top