如何在用户滚动页面时缓慢移动标题

How to slowly move header while user scrolls the page?

本文关键字：缓慢 移动 标题 用户 滚动      更新时间：2023-09-26

我想在此示例网站上实现此标头上使用的效果：

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

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

如果有人能给我一个用于使用元素执行此操作的代码的快速示例，将不胜感激。所以我可以在我自己的网站上使用它。

干杯。

$（window）.scroll（function （） {...}） 是你需要的

$（document）.scrollTop（） 是与顶部的滚动距离量

使用这个：

$(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
  }
});
相关文章：