Garder un élément fixé dans un conteneur pendant le défilement de la fenêtre

J'ai une question qui je pense sera mieux expliquée à l'aide d'une image, donc je vais l'attacher.

Garder un élément fixé dans un conteneur pendant le défilement de la fenêtre

Ok, donc en gros ce que j'ai est un conteneur parent, et d'un élément à l'intérieur (c'est un bloc de texte), que nous appellerons l'élément FIXE.

Lorsque l'utilisateur est en haut de la page, je veux de l'élément fixe pour être au top de sa mère. Lorsque l'utilisateur commence à défiler en bas de la page, et la mère commence à se déplacer jusqu'le port de la vue, je veux de l'élément fixe de suivre le défilement jusqu'à ce qu'il atteigne le fond de sa mère, puis il s'arrête là.

Il n'y a actuellement pas de HTML ou de quoi que ce soit pour le présent, parce que je suis dans le rough croquis étape de ce site web.

Je suis ouvert à l'utilisation de jQuery ou javascript en général, mon JS compétences sont limitées, et je suis familier avec jQuery, mais je n'ai pas l'esprit de copier et de coller le code et de jouer avec elle.

Toute aide sera grandement appréciée. Merci!

source d'informationauteur jkilp

  1. 3

    Ce que vous voulez faire à l'aide de javascript (avec ou sans jQuery) est le changement de la position de l'élément absolument à l'encontre de la position de la mère, le parent doit être relative. Vous changez la position en fonction de la position de la barre de défilement.

    Ce tutoriel a une bonne explication de la façon de le faire.

    http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/

  2. 0

    Pour certaines pages pertinentes ou lorsque vous redimensionnez votre navigateur, encadrés devenir un élément central. de sorte que vous pouvez prendre soin d'un frein de point. J'ai utilisé 786. Aussi la div peut ne pas être d'abord positionnés sur le haut, de sorte que vous devez définir un décalage par code. 

    <script>
$().ready(function() {
var $scrollingDiv = $("#scrollingDiv");
var $div_top = $scrollingDiv.offset().top;
$(window).scroll(function(){
if(window.outerWidth > 786) {
var $scroll_top = $(window).scrollTop();
if($scroll_top > $div_top) {
$pos = $scroll_top - $div_top;
$scrollingDiv
.stop()
.animate({"top": $pos + "px"}, "slow" );
} else if($('#scrollingDiv').offset().top > $div_top) {
$scrollingDiv
.stop()
.animate({"top": "0px"}, "slow" );
}
} else {
$scrollingDiv.css("top", 0); //sidebar became center object
}
});
$(window).resize(function() {
if(window.outerWidth > 786) {
var $scroll_top = $(window).scrollTop();
if($scroll_top > $div_top) {
$pos = $scroll_top - $div_top;
$scrollingDiv
.stop()
.animate({"top": $pos + "px"}, "slow" );
} else if($('#scrollingDiv').offset().top > $div_top) {
$scrollingDiv
.stop()
.animate({"top": "0px"}, "slow" );
}
} else {
$scrollingDiv.css("top", 0); //sidebar became center object
}
});
});
</script>