jquery fixation d'une barre latérale pendant le défilement, jusqu'en bas

Ce code est tiré de waypointarts.com et c'est supposer pour créer une Fixation d'une barre latérale pendant le défilement, jusqu'en bas.
problème, c'est quand la droite div est rempli à la gauche de la div de taille, même si la valeur 100# rester fixe à hauteur de certains, la fenêtre/écran ou quelque chose. comment puis-je le régler de sorte que 100% de la hauteur ou l'équivalent à droite div hauteur.

HTML
L'en-tête

<div id="wrapper">

  <div id="left">

    <div id="sidebar">

      Sidebar Content

    </div>

  </div>

  <div id="right">

    This is the text of the main part of the page.

  </div>

  <div class="clear"></div>

</div>

<div id="footer">Footer</div>

CSS

#header {
  background: #c2c2c2;
  height: 50px
}

#wrapper {
  width: 500px
}

#left {
  background: #d7d7d7;
  position: absolute; /* IMPORTANT! */
  width: 150px;
  height: 100%
}

#right {
  position: relative;
  width: 350px;
  float: right
}

#sidebar {
  background: #0096d7;
  width: 150px;
  color: #fff
}

.clear {
  clear: both
}

#footer {
  background: #c2c2c2
}

JAVASCRIPT

$(document).ready(function () {

    var length = $('#left').height() - $('#sidebar').height() + $('#left').offset().top;

    $(window).scroll(function () {

        var scroll = $(this).scrollTop();
        var height = $('#sidebar').height() + 'px';

        if (scroll < $('#left').offset().top) {

            $('#sidebar').css({
                'position': 'absolute',
                'top': '0'
            });

        } else if (scroll > length) {

            $('#sidebar').css({
                'position': 'absolute',
                'bottom': '0',
                'top': 'auto'
            });

        } else {

            $('#sidebar').css({
                'position': 'fixed',
                'top': '0',
                'height': height
            });
        }
    });
});

Image de waypoitsarts.com:

jquery fixation d'une barre latérale pendant le défilement, jusqu'en bas

OriginalL'auteur Francis Chibaye | 2014-01-30

  1. 4

    Je pense que votre script fonctionne très bien, probablement que le problème est sur votre CSS. Afin de bien contenir un position:absolute; élément, vous devez définir son élément parent ('#wrapper') à position:relative.

    Voir la démo sur cette jsfiddle: jsfiddle.net/J62Cp/

    Juste la réponse que je cherchais. Merci man, merci beaucoup.

    OriginalL'auteur Mark S

  2. 2

    J'en ai un similaire de l'installation. J'avais besoin d'un "post-it" div qui a commencé au sommet de la section de contenu (300px dessous de la partie supérieure de la page, en raison de l'en-tête), est fixe, alors que je défile vers le bas, mais il s'est arrêté quand je suis arrivé à un certain point (le pied de page). Avec pur CSS, le collant div allait à l'arrière de mon pied de page, après j'ai eu vers le bas. Votre code m'a fait aller dans la bonne direction, mais voici les changements que j'ai faits pour mon cas d'utilisation:

    $(document).ready(function () {
    var length = $("#left").height() - $("#sidebar").height();

    $(window).scroll(function () {
        var scroll = $(this).scrollTop();
        var height = $('#sidebar').height() + 'px';

        if(scroll <= 0) {
            $("#sidebar").css({
                'position': 'absolute',
                'top': '0'
            });
        } else if(scroll >= length) {
            $("#sidebar").css({
                'position': 'absolute',
                'bottom': '0',
                'top': 'auto'
            });
        } else {
            $("#sidebar").css({
                'position': 'fixed',
                'top': '300px'
            });
        }
    });
});

    OriginalL'auteur UTAlan

  3. 1

    Voulez-vous fixe placé la barre latérale ou la barre latérale à hauteur = au contenu principal de la partie????
    si vous voulez la hauteur de la barre latérale est égale au contenu principal de la partie, alors cela peut vous aider..

    $(function(){
   var mainHeight = $('.right').height();
      $('.left').css({
         'height':mainHeight
      });
});

    OriginalL'auteur Raajen