Javascript ou Jquery: faites Défiler jusqu'à la position Fixe div

Je veux une div qui va défiler lorsque l'utilisateur de faire défiler la page et elle sera à position fixe lorsque c'est une balise parent se termine. Par exemple:- Voir ce lien http://www.9gag.com/ ils ont beaucoup de messages sur une page. Lorsque nous défiler un post et aller à la fin du premier post, le titre et les boutons de partage de devenir à position fixe et ensuite le deuxième poste en faire de même et de même pour les prochains posts. Exactement comme que. Comment peut-on le faire en Jquery ou raw javascript ou css.

OriginalL'auteur John Preston | 2012-03-20

  1. 3

    Peut-être vous voulez essayer ce plugin: http://labs.anthonygarand.com/sticky/ Collant est un plugin jQuery qui vous donne la possibilité de
    faire de n'importe quel élément sur votre page toujours rester visibles en prise de l'élément à flottait quand ils ont atteint la limite.

    OriginalL'auteur Taufik Nurrohman

  2. 1

    $(window).scrollTop() vous donnera le nombre de pixels défile vers le bas dans le navigateur, $('postcontainer').offset() vous donnera les positions x,y d'un post contenant.

    Donc, si vous liez un événement à $(window).scroll() ou à la mousescroll, vous pouvez vérifier si le postcontainer de offset().top est inférieure à la window.scrollTop. Si c'est alors que vous commencez à déplacer l'élément vers le bas par rapport à la post conteneur. Lorsque vous faites cela, vous avez besoin de garder une trace de la poste contenant de la hauteur et de l'élément mobile de la hauteur pour s'assurer qu'il ne va pas vers le passé le fond du récipient.

    Donc si postcontainer.height - movingelement.position().top >= movingelement.height() alors vous avez besoin pour fixer la position de l'élément mobile. Faire le contraire pendant le défilement arrière.

    J'espère que cela va vous faire réfléchir et de commencer à coup de pied hors du code.

    pouvez-vous svp me donner au moins un exemple.

    OriginalL'auteur Rob

  3. 0

    C'est la solution à votre problème avec une simple propriété css.

    utilisation position:sticky à suit le défilement.

    Voici l'article explique.

    http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit

    et de la vieille façon de faire de cette démo

    avec collant position de démonstration

    OriginalL'auteur Konga Raju