Puis-je garder une DIV toujours à l'écran, mais pas toujours dans une position fixe?
J'ai un formulaire principal pour mon site Web et je souhaite ancrer une div en haut de la zone de contenu à l'intérieur du formulaire principal. Cette div doit toujours être visible malgré la position du défilement. Est-ce possible?
Une image l'expliquerait mieux.
J'ai posté un échantillon comme commentaire, donc je suppose que j'écrirai une réponse complète à cette question.
Le balisage est assez simple, mais il y a quelques notes importantes pour chaque section.
HTML
<div id="page">
<div id="header">
<div id="header-inner"> <!-- Note #1 -->
<img src="http://placehold.it/300x100" />
</div>
</div>
<div id="content">
<!-- Some Content Here -->
</div>
</div>
CSS
#page {
padding: 100px;
width: 300px;
}
#header,
#header-inner { /* Note #1 */
height: 100px;
width: 300px;
}
.scrolling { /* Note #2 */
position: fixed;
top: 0;
}
JavaScript
//jQuery used for simplicity
$(window).scroll(function(){
$('#header-inner').toggleClass('scrolling', $(window).scrollTop() > $('#header').offset().top);
//can be rewritten long form as:
var scrollPosition, headerOffset, isScrolling;
scrollPosition = $(window).scrollTop();
headerOffset = $('#header').offset().top;
isScrolling = scrollPosition > headerOffset;
$('#header-inner').toggleClass('scrolling', isScrolling);
});
Note 1
L'en-tête de défilement sera attaché au sommet de la page à l'aide de position: fixed, mais ce style supprimera le contenu du flux de contenu, ce qui fera sauter le contenu à moins que son conteneur ne conserve la hauteur d'origine.
Note 2
Les styles appartiennent à CSS, mais il peut s'avérer difficile d'aligner correctement certains éléments avec leur position d'origine. Vous devrez peut-être définir de manière dynamique la propriété left ou right css via JavaScript.
Vous aurez besoin de jQuery ou autre, voir mon violon ici
Modifier
fonction jQuery, où .form est la div du contenu et .banner est la div qui est ancrée
$(window).scroll(function() {
t = $('.form').offset();
t = t.top;
s = $(window).scrollTop();
d = t-s;
if (d < 0) {
$('.banner').addClass('fixed');
$('.banner').addClass('paddingTop');
} else {
$('.banner').removeClass('fixed');
$('.banner').removeClass('paddingTop');
}
});
.fixed {
position:fixed;
top:0px;
}
.paddingTop{
padding-top:110px;
}
J'ai créé un nouveau violon qui, je l'espère, peut être utile. La DIV peut être positionnée de manière arbitraire dans la page et reste visible lors du défilement.
<div id="mydiv">
fixed div
</div>
<div class="ghost">
fixed div
</div>
CSS:
#mydiv { position: fixed; background-color:Green; float:left; width:100%}
.ghost{opacity: 0}
il y a probablement une meilleure solution que d'utiliser un "fantôme" mais je ne sais pas lequel.
Supposons que la position supérieure (en haut de l'écran) de l'en-tête div est de 100px au début, vous pouvez procéder comme suit: Si le défilement supérieur de la fenêtre est supérieur à 100px, réglez l'en-tête div sur position avec top 0px; si le haut de la fenêtre avec défilement est inférieur à 100px, définissez la position de l'en-tête div avec la présentation par défaut. Avec jquery, c'est comme ça:
$(document).scroll(function() {
if ($(this).scrollTop() > 100) {
$('div#header').css({
"position" : 'fixed',
"top" : 0 });
} else {
$('div#header').css({ "position" : 'relative', "top" : 0 });
}
});
il est implémenté avec l'événement scroll.
À compter de juillet 2018, il est temps de revenir sur cette question. position: sticky a été introduit exactement pour des problèmes comme le vôtre, et a un support de navigateur décent .
Cela fonctionne comme ceci:
<div style="position: sticky; top: 0;"> Header </div>
où top est la distance entre le sommet de la fenêtre d'affichage et la div devrait rester lorsque vous faites défiler. La spécification de top est obligatoire. D'autres options telles que bottom, left ou right do pas fonctionnent actuellement.
Le sticky div agira comme un div normal dans tous les sens, sauf lorsque vous passerez devant, alors il restera en haut du navigateur.
Voici un jsfiddle pour vous donner une idée.
Je crois que vous recherchez une div qui suit lorsque vous faites défiler la liste. Cette implémentation est visible pour les paniers sur plusieurs sites. Vous voudrez peut-être consulter http://kitchen.net-perspective.com/open-source/scroll-follow/
Un autre bon lien est: http://jqueryfordesigners.com/fixed-floating-elements/
Quelques exemples connexes de parchemins: http://webdesign14.com/30-tutorials-and-plugins-jquery-scroll/
Utilisez CSS pour corriger sa position.
En supposant que votre <div> ait un identifiant "topdiv":
#topdiv {
position: fixed;
top: 0;
left: 0
}
Notez que vous devrez définir une marge supérieure pour le contenu, car la div fixe affichera "sur" le contenu:
#contentarea { margin-top: 35px; }
Cochez cette violon .
Vous pouvez essayer ce CSS. Peut-être que c'est ce que vous recherchez:
html, body{
text-align:center;
margin:0px;
background:#ABCFFF;
height:100%;
}
.header-cont {
width:100%;
position:fixed;
top:0px;
}
#header {
height:50px;
background:#F0F0F0;
border:1px solid #CCC;
width: 100%;
margin:auto;
}
.content-cont {
width:100%;
position:absolute; /* to place it somewhere on the screen */
top:60px;
bottom:60px; /* makes it lock to the bottom */
overflow:auto;
}
#content {
background:#F0F0F0;
border:1px solid #CCC;
width:960px;
position:relative;
min-height:99.6%;
height:auto;
overflow: hidden;
margin:auto;
}
.footer-cont {
width:100%;
position:fixed;
bottom:0px;
}
#footer {
height:50px;
background:#F0F0F0;
border:1px solid #CCC;
width: 100%;
margin:auto;
}
Cela ressemble à ce que vous recherchez est un div en-tête avec deux propriétés:
- Quand il serait normalement visible, il reste dans sa position par défaut.
- Quand il serait normalement invisible, il apparaît en haut de l'écran.
En bref, quelque chose qui ressemble un peu à "max-top" (qui n'existe pas en tant que propriété css).
Si vous voulez faire tout cela, le moyen le plus rapide peut impliquer du JavaScript. Essayez this ; si je reçois un peu de temps plus tard, je mettrai à jour ceci avec un peu plus de code.
dans cet exemple modifié, banner div reste à l'écran lors du défilement et reste également dans le conteneur div. lorsque le conteneur divs bottom atteint le haut de l'écran, banner div retourne en position relative et défile avec le conteneur http://jsfiddle.net/SeeTS/198/
JQuery
$(window).scroll(function() {
t = $('.form').offset();
t = t.top;
s = $(window).scrollTop();
d = t-s;
b = $('.banner').height();
f = $('.form').height();
if (d < 5) {
if(d < -(f-b)-15)
{
$('.banner').addClass('bottom');
$('.banner').removeClass('fixed');
}
else {
$('.banner').addClass('fixed');
$('.banner').removeClass('bottom');
}
}
else {
$('.banner').removeClass('fixed');
}
});
CSS
.form {
position:relative;
width:480px;
margin: 100px auto;
padding:10px;
}
p {
border:2px dotted #000;
}
.banner {
border-radius:8px;
background:#660000;
height:100px;
width:60px;
}
.fixed{
position:fixed;
top:5px;
}
.bottom {
position:absolute;
bottom:0px;
}
HTML
<table class="form" id="form">
<tr>
<td valign="top" width="70px">
<div class="banner"></div>
</td>
<td>
<p>Cum sociis natoque penatibus...</p>
</td>
</tr>
</table>
<div style="position:relative;height:500px;">
</div>