Question

我有一个单页网站，其中包含固定标题和部分内容。我使用scrollTo和localScroll跳转到每个部分，但我在滚动时将class=active添加到a href时遇到问题。

我可以在点击时添加class=active，但我不知道如何在滚动时执行此操作，并且显然在从＆＃34; old＆＃34;切换时将其删除到＆＃34;新＆＃34;部分。

这是我在点击时所做的：

$('#menu').find('a').click(selectNav);
function selectNav() {
    $(this).parents('ul:first').find('a').removeClass('active').end().end().addClass('active');
}
function trigger(data) {
    var el = $('#menu').find('a[href$="' + data.id + '"]').get(0);
        selectNav.call(el);
}

更新

<ul id="menu">
    <li><a href="#homepage"><span>Home</span></a></li>
    <li><a href="#connections"><span>Connections</span></a></li>
</ul>

<section id="homepage" class="main">
..........
</section>

<section id="connections" class="main">
..........
</section>

请帮忙吗？

Answer 1

如果我正确地阅读了您的问题，您想要添加该类，然后使窗口滚动到某个位置，然后在滚动完成后删除该类。

你可以看一下这个问题：jQuery scroll to element

然后我的建议是应用＆＃34; Active＆＃34;单击类，然后使用回调函数在动画完成后再次将其删除。

http://jsfiddle.net/uc7KF/

$("body").animate(
    {
        scrollTop:$("#connections").offset().top},0, function(){
        console.log("Done - Remove class")}
    }
)

这是我能提出的唯一解决方案，即在滚动完成后删除课程。

Answer 2

$.fn.inView = function(){
    //Window Object
    var win = $(window);
    //Object to Check
    obj = $(this);
    //the top Scroll Position in the page
    var scrollPosition = win.scrollTop();
    //the end of the visible area in the page, starting from the scroll position
    var visibleArea = win.scrollTop() + win.height();
    //the end of the object to check
    var objEndPos = (obj.offset().top + obj.outerHeight());
    return(visibleArea >= objEndPos && scrollPosition <= objEndPos ? true : false)
};


$(window).scroll(function(){
    if($("#homepage").inView()) {
        //#homepage active
    } else if($("#connections").inView()) {
        //#connections active
    }   
});

滚动时添加class = active

2 个答案: