jquery - 在视差滚动上，更改导航 css

Question

正在研究一个一旦滚动就会改变样式的视差导航器。我想到了这个，但这样做是不是更好的方法，这样我就不必每次都重复所有的事情了？ JSFiddle

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    var objectSelect = $(".product");
    var objectPosition = objectSelect.offset().top;
    if (scroll > objectPosition) {
        $(".product-link").addClass("change");
    } else {
        $(".product-link").removeClass("change");
    }
});
$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    var objectSelect = $(".texture");
    var objectPosition = objectSelect.offset().top;
    if (scroll > objectPosition) {
        $(".texture-link").addClass("change");
        $(".product-link").removeClass("change");
    } else {
        $(".texture-link").removeClass("change");
    }
});

Answer 1

我用这个解决了这个问题:

function onScroll(event){
    var scrollPos = $(document).scrollTop();
    $('.navigate a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.outerHeight() > scrollPos) {
            $('.navigate ul li a').removeClass("active");
            currLink.addClass("active");
        }
    });
}

<div class="navigate">
            <ul>
                <li><a class="active" href="#product">Product</a></li>
                <li><a href="#history">History</a></li>
                <li><a href="#texture">Texture</a></li>
                <li><a href="#skintype">Skin Type</a></li>
            </ul>
        </div

然后只需在 .navigate 中使用 #divs。