如何通过jQuery的滚动上

问题描述：

我创造了这个笔在CodePen.io，页面滚动顺利不同部分上点击任何项目的NAV（导航）如何通过jQuery的滚动上

这里的页面添加一些CSS类是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

您的建议将理解，预先感谢您！

兄弟@avall我已经.scroll（）读取，如果你看一下笔，我已经用它来实现视差背景效果，但不知道如何实现我想要的，如上所述。 – Bangash 2014-09-24 21:17:33

这已经回答了[这里]（http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling） – Jose 2014-09-24 21:18:20

答

您可以在此fiddle

仰望你必须使用事件滚动

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

，然后计算顶部位置差。

这个解决方案的工作，我实际上修改了一下，因为它闪烁当我使用小提琴的代码形式。 – Bangash 2014-09-24 21:44:11

答

添加到您的$(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').click()

删除

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

这也增加了一个非常酷的通过所有部分改变，而在4点击观看时1.

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

让我试试这个，其实我修改它，它的工作，但可能是你的解决方案更好。 – Bangash 2014-09-24 21:42:39

答

通过使用jQuery将css添加到对应于滚动位置的元素非常简单。可以使用相同的概念来使用滚动值将元素添加到元素。下面是一个示例代码：

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

上面的代码将类活性添加到具有类portion1当它是在浏览器窗口的顶部元件。如果你想让它尽快进入浏览器窗口中添加类活跃，然后使用此代码：在jQuery.com

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

如何通过jQuery的滚动上

相关推荐