1

Today I was watching some youtube videos when I actually noticed the website layout. I would like to know how that can be done. I would like to achieve the following website layout:

  • At the end of the header, the page stops scrolling and the scrolling only has effect on the content.

  • I would like to make the sidebar keep the same position and always be visible on the right side.

  • I would like to point out that I don't mean a scrollbar within my content and if my explanation doesn't make sense have a look at the youtube homepage or this website http://www.squarespace.com/press-releases/.

I guess some javascript or jQuery is needed and hope you guys can give me a push in the right direction. I would really appreciate it if you guys can tell me what I'll need to use to achieve this effect.

Thanks in advance.

EDIT: I noticed the effect in youtube is only seen when I use the Opera browser another website with what I have in mind http://www.squarespace.com/press-releases/

user3188287
  • 33
  • 3

1 Answers1

0

you can do this with jquery

$(window).scroll(function(){

   var scrolled = $(window).scrollTop();

   //if window is scrolled past the height of the header (in my case 200px), execute code
   //or you could do this dynamically by saying scrolled > $(".header").height();
   if(scrolled > 200){ 

      $(".left").css({"position":"fixed"});

   }else{

    $(".left").css({"position":"inherit"});

   }
});

JSFIDDLE

And FYI the page doesn't stop scrolling, the sidebar just becomes fixed to the page.

jmore009
  • 12,863
  • 1
  • 19
  • 34