Question

在创建单页网站时，我经常选择有一个固定的标题，在向下滚动时突出显示页面链接，为了做到这一点，我通常最后编写了几行jQuery，我只是想知道，是有一种方法可以写这个不需要特定选择器吗？

例如，如果我有10个链接，这个代码可能会变得很重，我可以更改它，以便无论我有多少链接/部分它仍能正常运行（因此它仍然适用于创建链接的CMS和部分自动）？

$(document).ready(function () {
    $(window).scroll(function () {

// Sets a variable for the distance scrolled from the top of the page

        var y = $(this).scrollTop();

// Sets variables for the distance of each section from the top of the whole
// page (40 is the height of the fixed header, so that it applies the class when
// the bottom of the header reaches the 'page' instead of the top of the window)

        var sectionOne = ( $('#section_one').offset().top - 40);
        var sectionTwo = ( $('#section_two').offset().top - 40);
        var sectionThree = ( $('#section_three').offset().top - 40);

// If distance from top of page is greater than or equal to than the variables 
// set earlier then apply class to relevant link and remove from ANY others ... 
// ELSE remove class from relevant link

        if (y >= sectionOne) {
            $('.link_1').addClass('active');
            $('.link_2').removeClass('active');
            $('.link_3').removeClass('active');
        } else {
            $('.link_1').removeClass('active');
        }

// Repeat for other section and link

        if (y >= sectionTwo) {
            $('.link_2').addClass('active');
            $('.link_1').removeClass('active');
            $('.link_3').removeClass('active');
        } else {
            $('.link_2').removeClass('active');
        }

// Repeat for other section and link

        if (y >= sectionThree) {
            $('.link_3').addClass('active');
            $('.link_1').removeClass('active');
            $('.link_2').removeClass('active');
        } else {
            $('.link_3').removeClass('active');
        }

// and so on

    }); 
});

谢谢！

Answer 1

我会在您的所有链接中添加.link类，以简化代码。然后，您将能够循环链接并概括您的治疗：

<header>
    <nav>
        <ul>
            <li><a class="link link_1 active" href="#section_one">Section One</a></li>
            <li><a class="link link_2" href="#section_two">Section Two</a></li>
            <li><a class="link link_3" href="#section_three">Section Three</a></li>
        </ul>
    </nav>    
</header>

<section id="section_one"></section>
<section id="section_two"></section>
<section id="section_three"></section>

$(document).ready(function () {
    $(window).scroll(function () {

        var y = $(this).scrollTop();

        $('.link').each(function(event) {
            if(y >= $($(this).attr('href')).offset().top - 40) {
                $('.link').not(this).removeClass('active'); 
                $(this).addClass('active');
            }
        });

    });
});

Update JsFiddle

如果您到达section_one，则link_1将处于有效状态如果您到达section_two，link_2将处于有效状态，link_1处于非活动状态（感谢$('.link').not(this)选择器）。

我可以编写这个jQuery以减少选择器的特定性吗？

1 个答案: