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"});
}

也许这也必须优化以尊重视口高度。

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

Answer 2

获取容器高度并使用它来计算高度的百分比

像这样的东西

$(document).scroll(function(){
    var percent = 20;
    var height = $(document).height();
    var point = height / 100 * percent;

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

例子