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

FYI页面不会停止滚动，侧边栏只会固定在页面上。

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

1 个答案: