jquery - 使用查询更改滚动百分比的 CSS

Question

我有一个带有固定导航的单页网站。每个部分都设置为窗口高度的 100%。我想在向下滚动时更改导航中文本的颜色。

到目前为止，我已经有了这段代码，这正是我想要的，除了我需要滚动基于百分比而不是像素数量。

到处寻找解决方案，有人可以帮忙吗!？

$(document).scroll(function(){

    var row = $('.navigation a'), scrollTop = $(this).scrollTop();
    if(scrollTop > 70)
    {   
        row .css({"color":"#333333"});
    }
    else if (scrollTop <= 70)
    {
        row.css({"color":"#d1d0ce"});
    }
});

Answer 1

您是否尝试使用 $(document).height() 自己计算一下？类似的东西

if ((scrollTop / $(document).height()) > 0.7) {
    row.css({"color":"#333333"});
}

也许这也必须进行优化以尊重视口(viewport)高度。

var docHeight = $(document).height() - $(window).height();
if ((scrollTop * 100 / docHeight) > 70) {
    row.css({"color":"#333333"});
}