Question

我在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;
});

我已经添加了课程＆＃34;活跃＆＃34;当有人点击导航内的任何链接时，但是当有人使用滚动条滚动到该部分而不是点击链接时，如何添加活动课程？

查看笔here

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

Answer 1

您可以查看此fiddle

您必须使用事件滚动

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

然后计算最高位置的差异。

Answer 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

Answer 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'); }

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

3 个答案: