Faites div coller en haut de la page après avoir défilé devant une autre div?

<div id="header"></div>
<div id="sticky"></div>
<div id="section"></div>
<div id="footer"></div>

<style>
  body { margin: 0px; background-color: #e3e3e3; }
  #header { background-color: #cb5454; height: 140px; }
  #sticky { background-color: #546bcb; height: 70px; }
  #section { height: 1500px; }
  #footer { background-color: #cb5454; height: 140px; }
</style>

Voici mon code: http://jsfiddle.net/uaqh018d/

Je veux #collants pour se coller en haut de la page, après le défilement passé #en-tête. Je veux aussi qu'il caché jusqu'à ce que coincé. Et puis, bien sûr, avoir de la décoller+se cacher à nouveau après le défilement en arrière jusqu'à nº d'en-tête.

Comment puis-je y parvenir?

source d'informationauteur John

  1. 20

    Je recommande l'ajout d'une classe à #sticky quand il est prêt à être fixé à la partie supérieure de l'écran, puis en supprimant la classe quand vous voulez "décoller". Ensuite, vous pouvez utiliser cette classe dans le CSS.

    par exemple, pour une classe fixed vous placez les éléments suivants dans votre CSS:

    #sticky {
    display: none;
    background-color: #546bcb;
    height: 70px;
}
#sticky.fixed {
    display: block;
    position: fixed;
    top: 0;
    width: 100%;
}

    Et puis votre jQuery devrait ressembler à ceci:

    $(window).scroll(function() {
    var distanceFromTop = $(this).scrollTop();
    if (distanceFromTop >= $('#header').height()) {
        $('#sticky').addClass('fixed');
    } else {
        $('#sticky').removeClass('fixed');
    }
});

    Voici une mise à jour de VIOLON

    Je pourrais aussi vous recommander certains jQuery fondu ou de glisser des effets (voir le violon).