当div到达页面顶部时如何更改css

Question

我有一个div元素，其位置固定，ID为#topnav。我的ID低于#container。当用户向下滚动到页面顶部#container的位置时，我希望将#topnav的不透明度更改为0.3 - 只要#container至少在页面顶部。

我在StackExchange上发现了几个类似的帖子，但似乎没有一个对我有用。

我更喜欢在普通的Javascript中执行此操作，但如果需要，我可以使用JQuery。任何帮助将非常感激。 ：）

Answer 1

我意识到你要求一个JavaScript解决方案，但我只知道如何在JQuery中做到这一点（希望其他人可以使用它来提出一个纯JS解决方案）。

Fiddler： JS Fiddle Example

<强> JQuery的：

$(window).scroll(function () {
    if ($(document).scrollTop() == 0) {
        $('#topnav').removeClass('faded');
    } else {
        $('#topnav').addClass('faded');
    }
});

<强> CSS：

.faded
{
    opacity: 0.3;
}