jQuery - 菜单滚动项效果示例 - 它叫什么？答案

【问题标题】：jQuery - Menu Scroll Item Effect Example - What is it called?jQuery - 菜单滚动项效果示例 - 它叫什么？
【发布时间】：2011-07-22 11:32:45
【问题描述】：

有人知道这个页面上的jQuery效果叫什么吗？ http://crushlovely.com/

当您向下滚动页面时，会根据您的滚动位置选择不同的左侧菜单项。

我需要知道效果叫什么或如何重新创建它？

【问题讨论】：

我不知道答案，但正确的代码在assets3.crushlovely.com/assets/a4/9653bac60/crushlovely.js。

标签： jquery scroll effects

【解决方案1】：

我相信您正在寻找类似的教程

http://www.distractedbysquirrels.com/blog/one-page-layout-with-fixed-navigation-and-jquery/

我将其称为“固定菜单/导航”，或者有时人们将其称为“粘性菜单/导航”。通过使用 position:fixed CSS 并从那里开始工作，它很容易完成。

希望有帮助

【讨论】：

【解决方案2】：

你可以这样做：

获取滚动条的位置，如果该距离大于您添加激活类的 div 顶部距离

比如返回顶部按钮，类似这样的：

$(window).scroll(function () {
  if ($(window).scrollTop() > element1_top_distance) {
    element1.addClass('active');
  } else if ($(window).scrollTop() > element2_top_distance) {
    element2.addClass('active');
  } else if ($(window).scrollTop() > element3_top_distance) {
    element3.addClass('active');
  } else if ($(window).scrollTop() > element4_top_distance) {
    element4.addClass('active');
  }
});

你可以很容易地创建布局，只要记住为 javascript 或 jQuery 更正这段代码就可以了

【讨论】：