Je veux créer un élément fixe (comme collant) lorsque je fais défiler et atteins le haut d'un autre élément. L'élément fixe augmentera la propriété bottom de css pour ne pas passer le haut de l'élément que j'ai défini comme lié (l'élément dont vous ne pouvez pas passer le point, comme un sol). J'ai fait un stylo qui montre ce que je veux, j'espère que cela aide: https://codepen.io/vendramini/ pen / xNWpPK . Je ne sais vraiment pas quel calcul je dois faire pour y parvenir. S'il vous plaît, aidez-moi.
https://codepen.io/vendramini/pen/xNWpPK Le mieux que je puisse faire pour illustrer cela.
<div class="sticky" data-bound="#ground"></div> <section class="a"></section> <section class="b"></section> <section class="c"></section> <section class="d"></section> <footer class="ground" id="ground"></footer> <section class="a"></section> <section class="b"></section> <section class="c"></section> <section class="d"></section>
//jQuery required
(function($){
$('[data-bound]').each(function(){
const $elem = $(this);
const $bound = $( $elem.data('bound') );
$(window).scroll(function(){
const scrollTop = $(window).scrollTop();
const boundTop = $bound.offset().top;
const boundHeight = $bound.height();
const delta = (scrollTop - boundTop); //+ boundHeight;
console.log({
scrollTop,
boundTop,
delta,
});
if( delta > 0 ){
$elem.css('bottom', delta);
}
else{
$elem.removeAttr('style');
}
});
});
})(jQuery);
*{
margin: 0;
padding: 0;
}
section{
height: 100vh;
width: 100vw;
background: #eee;
position: relative;
max-width: 100%;
}
.a{
background: #faa;
}
.b{
background: #ffa;
}
.c{
background: #afa;
}
.d{
background: #aaf;
}
.sticky{
width: 100%;
position: fixed;
height: 100px;
background: blue;
opacity: 0.5;
bottom: 0;
z-index: 1;
}
.ground{
height: 2000px;
background: black;
}
Je m'attends à avoir un élément fixe qui ne fonctionne pas t passer l'élément au sol. Voilà.
4 Réponses :
Remplacez
$elem.css('bottom', 0);
par
if( delta > 0 ){
$elem.css('bottom', delta);
}
else{
$elem.removeAttr('style');
}
pour coller l'élément toujours en bas.
Merci pour la réponse, mais il n'est pas obligatoire que l'élément ait toujours le bas: 0, je le laisse libre de le décider via css. Je supprime donc la balise de style en ligne. Quoi qu'il en soit, cela n'influence pas la résolution du problème.
Je ne suis pas sûr de comprendre exactement ce que vous voulez, mais je pense que vous pouvez y parvenir avec uniquement du CSS en utilisant position: sticky sur le pied de page.
https://codepen.io/anon/pen/jozzPq
les changements pertinents: p >
ajoutez un wrapper aux éléments avec le pied de page collant:
.ground{
height: 100px;
background: black;
position: sticky;
bottom: 0;
}
positionnez le pied de page en bas et réglez-le sur collant
<div> <section class="a"></section> <section class="b"></section> <section class="c"></section> <section class="d"></section> <footer class="ground" id="ground"> </footer> </div>
Sticky est génial, vous avez fait exactement ce que je voulais mais cela n'atteint pas tous les navigateurs que je veux: caniuse.com/ # search = sticky . Je voudrais le faire en utilisant jQuery calculant la propriété inférieure de l'élément fixe. Merci quand même!
Vous pouvez l'utiliser pour les navigateurs qui prennent en charge position: sticky et une solution de secours js si le navigateur ne le prend pas en charge. Vous pouvez faire if (! CSS.supports ('position', 'sticky')) {...} dans votre code js, il sera plus performant sur les navigateurs qui le supportent, vous J'aurai la plupart du problème résolu avec cela (je suppose que le wrapper div supplémentaire que j'ai ajouté si les travaux collants vous aideront également dans les calculs)
Ce que je veux, c'est à côté de ce que fait UIKit: https://getuikit.com/docs/sticky
Mais le problème est que UIKit utilise le haut au lieu du bas.
Cela devrait être une modification de votre question, pas une publication comme réponse
J'ai enfin trouvé la réponse:
https://codepen.io/vendramini/pen/ xNWpPK
La solution est d'ajouter la hauteur de la fenêtre au calcul du delta:
const windowHeight = $(window).height(); const delta = (scrollTop - boundTop) + windowHeight;
Merci à tous ceux qui ont contribué à ce fil! p>
Quelle est l'idée? définir un arrière-plan pour montrer comme votre passé le ciel et creuser dans le sol? Serait-ce une position / attachement d'arrière-plan ou un pseudo-élément absolu attaché au sol pour qu'il glisse avec lui? pour dimensionner le pseudo, il pourrait être la différence de la hauteur du document moins la position du sol je suppose?
Ce n'est pas un arrière-plan, c'est un élément normal (c'est un div fixe avec bottom: 0), donc quand il atteint le sol, la position de cet élément (la propriété bottom de css augmentera pour ne pas laisser l'élément passer l'élément ground, rappelez-vous, c'est un élément fixe).
imaginez une pierre tombant dans le sol (le rouleau est le mouvement de celui qui tombe, comme une caméra), lorsque la pierre (élément fixe) atteint le sol, elle cesse de tomber (l'élément toujours fixe mais la position change par rapport au sol) , c'est tout
Document moins la position au sol? Montrez-moi un exemple de ce fonctionnement.