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

Posted 2023-05-08

【中文标题】使用查询更改滚动百分比的 CSS

【英文标题】：Changing CSS on percentage scrolled using query

【发布时间】：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。此示例使用水平滚动，但您可以将其调整为垂直滚动。

【参考方案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