用户滚动页面时如何缓慢移动标题？答案

【问题标题】：How to slowly move header while user scrolls the page?用户滚动页面时如何缓慢移动标题？
【发布时间】：2012-07-03 15:49:09
【问题描述】：

我想在这个示例网站上实现这个Header上使用的效果：

http://anchorage-theme.pixelunion.net/

您会注意到，当您滚动页面时，页眉会慢慢向上移动，直到它从视图中消失。我想达到同样的效果。我相信它需要一些 JS 和 CSS 定位，但仍然不知道如何实现这一点。这是通过视差滚动完成的吗？

如果有人能给我一个简单的代码示例，我将不胜感激。这样我就可以在自己的网站上使用它了。

干杯。

【问题讨论】：

建议：查看您在上面示例中显示的网站的源代码，以揭示效果背后的代码。
看起来很混乱，已经看过源代码了：S @Dexter

标签： javascript jquery html css

【解决方案1】：

$(window).scroll(function () {...}) 是你需要的那个

$(document).scrollTop() 是从顶部滚动的距离

【讨论】：

当用户滚动页面时会触发 $(window).scroll 事件。因此，与用户所做的滚动量和标题的属性（我在这里不太确定）有关，您会相应地降低标题的高度。这是一个例子 $(window).scroll(function () { $('#navigation').css('top', $(document).scrollTop()); });
你有没有机会做一个快速的 jsfiddle，这样我就可以看到一些示例代码了？ @Rzv
这不是太难。 @Rzv.im 是正确的。根据您从顶部滚动的距离，您会降低标题的高度。 headerheight = scrollTop < MIN_HEIGHT ? MIN_HEIGHT : headerheight - scrollTop; 其中MIN_HEIGHT 是一个常量，表示当滚动超出阈值时您希望标题看起来有多窄。

【解决方案2】：

使用这个：

$(window).scroll(function(){ 
  if ($(this).scrollTop() > x){  // x should be from where you want this to happen from top//
    //make CSS changes here
  } 
  else{
    //back to default styles

  }
});

【讨论】：

我相信我可以使用它，但我希望它随着用户滚动而转换。在您的示例中，如果我将“x”设置为 200。一旦用户达到 201，更改会立即发生吗？ @SVS