How to keep content of a div always visible despite moving scrollbar down

Question

I am trying to duplicate the left nav at http://www.kahuna-webstudio.fr/ . If you take a look at http://www.kahuna-webstudio.fr/ , and scroll down about 50 pixels or so, you will see a div appear off to the left of the screen that has some navigation in it. I have most of it working, thanks to the help of some of you at stackoverflow. But the one part I do not have working is that the content of my div, images, do not stay stationary in place (or always visible) as you scroll down.

So what I want to happen is: when the div appears at the left of the screen, when the user scrolls down, I want the content of the div to appear always in view.

Right now what I have working is: through animate() I set the height of my left nav div to the document height, and the width grows to 80 pixels, and then some images fadeIn(). But the page is fairly long and as the user scrolls down they are also able to scroll down the height of my left nav div; and I always want the content of my left nav to always appear in view to the user.

I think this person posted a similiar question ( Keeping a header always in view ) but I am finding it difficult to attach if to my example code. Can anyone help? I appreciate it a lot.

Here is my code:

$(window).scroll(function(){
  var wintop = $(window).scrollTop();
  var docheight = $(document).height();
  var winheight = $(window).height();

  var newwidthgrow = 80;
  var smallheight = 0;
  var smallwidth = 0;


  if((wintop > 296)) {
    $("#slidebottom").stop().animate({height:docheight +"px"},'fast',function(){
      $("#slidebottom").stop().animate({width:newwidthgrow + "px"},'slow',function(){
        $("#slidebottomContents").fadeIn();
      });

    });
  }

  if((wintop < 25))
  { 
    $("#slidebottom").stop().animate({height:docheight +"px"},'fast',function(){

      $("#slidebottomContents").fadeOut(function(){
        $("#slidebottom").stop().animate({width:smallwidth + "px"});                                       
      });

    });

   }


});

Answer 1

As far as i'm concerned this can be covered by only css. To keep the div in the same position you can apply the following css:

css:

div id {
position: fixed;
left: 0px
width: 'your width'
}

position fixed freezes the div in the position you want. left keeps the div positioned on the left side of you page.

does this answer your question and solve your problem? if not let me know!