Question

使用parallex导航器，一旦滚动就会更改样式。我想出了这个，但这是一个更好的方法，所以我不必每次都重复一切吗？ 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。

在parallex scroll上，更改navigator css

1 个答案: