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

example

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

2 个答案: