【问题标题】:how to stop scrolling at end of the header and continue scrolling the content?如何在标题末尾停止滚动并继续滚动内容?
【发布时间】:2014-01-22 00:15:04
【问题描述】:

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

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

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

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

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

提前致谢。

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

【问题讨论】:

标签: javascript jquery html css


【解决方案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

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

【讨论】:

  • @user3188287 没问题。乐意效劳。只需将其标记为正确以供将来使用。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2022-07-08
  • 1970-01-01
  • 2020-07-01
  • 1970-01-01
  • 2020-02-13
  • 2021-02-06
相关资源
最近更新 更多