使用查询更改滚动百分比的 CSS答案

【问题标题】：Changing CSS on percentage scrolled using query使用查询更改滚动百分比的 CSS
【发布时间】：2013-03-27 05:04:27
【问题描述】：

我有一个带有固定导航的单页网站。每个部分都设置为窗口高度的 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"});
    }
});

【问题讨论】：

见this question。此示例使用水平滚动，但您可以将其调整为垂直滚动。

标签： jquery css navigation scroll percentage

【解决方案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"});
}

【讨论】：

【解决方案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"});
    }
});

example

【讨论】：