如何在滚动页面时通过 jQuery 添加一些 CSS 类答案

【问题标题】：How to add some CSS Class through jQuery on scrolling the page如何在滚动页面时通过 jQuery 添加一些 CSS 类
【发布时间】：2014-09-24 21:09:47
【问题描述】：

我在 CodePen.io 创建了这支笔，点击导航（导航）中的任何项目时，页面会平滑滚动到不同的部分

这里是 jQuery 代码。

// Smooth Scroll on clicking navigation items
$('nav a').click(function() {
  var $href = $(this).attr('href');
  $('body').stop().animate({scrollTop: $($href).offset().top}, 1000);

  // add class "active" to nav items on click
  $('nav a').removeClass('active');
  $(this).addClass('active');
  return false;
});

当有人单击导航内的任何链接时，我已经添加了“活动”类，但是当有人使用滚动条而不是单击链接滚动到该部分时，如何添加活动类？

看笔here

您的建议将不胜感激，在此先感谢您！

【问题讨论】：

Bro @avall 我已经在 jQuery.com 上阅读过 .scroll() 如果你看一下笔，我已经用它来实现视差背景效果，但不知道如何实现如上所述实现我想要的。
已经回答here

标签： javascript jquery html css smooth-scrolling

【解决方案1】：

你可以看看这个fiddle

你必须使用事件滚动

$(document).on("scroll", function(){ ... });

然后计算顶部位置的差异。

【讨论】：

这个解决方案有效，我实际上对其进行了一些修改，因为当我使用小提琴的代码形式时它正在闪烁。

【解决方案2】：

将此添加到您的 $(window).scroll() 函数中

$(".active").toggleClass("active");
   if ( $(window).scrollTop() < $("#portion2").offset().top-100){ //maybe you want to tweak this value
    $( $("nav a")[0]).toggleClass("active");
   }
  else if ( $(window).scrollTop() < $("#portion3").offset().top-100){
    $( $("nav a")[1]).toggleClass("active");
   }
  else if ( $(window).scrollTop() < $("#portion4").offset().top-100){
    $( $("nav a")[2]).toggleClass("active");
   }
  else{    
    $( $("nav a")[3]).toggleClass("active");    
  }
})

然后删除

$('nav a').removeClass('active');
$(this).addClass('active');

来自您的$('nav a').click()

当查看 1 时单击 4 时，这还增加了对所有部分的非常酷的更改。

在这里查看：http://codepen.io/anon/pen/dFkEG

【讨论】：

让我也试试这个，实际上我修改了它并且它工作了，但可能你的解决方案更好。

【解决方案3】：

使用 jQuery 将 css 添加到与滚动位置相对应的元素是相当简单的。可以应用相同的概念来使用滚动值向元素添加类。这是一个示例代码：

$(window).scroll(function(){ var wScroll = $(this).scrollTop(); //This stores your scroll value from top if (wScroll > $('#portion1').offset().top){ $('#portion1').addClass('active'); } });

上面的代码会将活动类添加到具有类part1 的元素，当它位于浏览器窗口的顶部时。如果您希望它在进入浏览器窗口后立即添加活动的类，请使用以下代码：

if (wScroll > $('#portion1').offset().top - ($(window).height())){ $('#portion1').addClass('active'); }

【讨论】：