如何在标题末尾停止滚动并继续滚动内容？

Question

今天我在看一些 youtube 视频时，我真正注意到了网站布局。我想知道如何做到这一点。我想实现以下网站布局：

• 在页眉末尾，页面停止滚动，滚动只对内容有影响。

• 我想让侧边栏保持相同的位置，并且始终在右侧可见。

• 我想指出，我并不是指我的内容中的滚动条，如果我的解释没有意义，请查看 youtube 主页或此网站 http://www.squarespace.com/press-releases/。

我猜想需要一些 javascript 或 jQuery，希望你们能推动我朝着正确的方向前进。如果你们能告诉我我需要用什么来达到这种效果，我将不胜感激。

提前致谢。

编辑：我注意到 youtube 中的效果只有在我使用 Opera 浏览器时才能看到另一个网站，我想到了 http://www.squarespace.com/press-releases/

Answer 1

你可以用 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

仅供参考，页面不会停止滚动，侧边栏只是固定在页面上。