根据元素的位置更改元素类

Question

我对此有一些疑问。希望你能帮助我。

我在固定位置创建了菜单。我希望它可以更改网站某些部分的颜色。

请查看附件以更好地了解

实际上我有一些代码：

我的切换菜单：

<input type="checkbox" id="toggle" class="input-toggler">   

<label for="toggle" class="menu-toggler">

        <span class="menu-toggler-line" id="change"></span>
        <span class="menu-toggler-line" id="change"></span>
        <span class="menu-toggler-line" id="change"></span>

</label>

此菜单的样式：

.menu-toggler{
    position: fixed; 
    right:5%; 
    top:10%;
    z-index: 9999; 
    display: flex; 
    justify-content:center; 
    flex-direction:column; 
    cursor: pointer;
}

.menu-toggler-line{
    height: 4px;
    width: 32px;
    display: block;
    background-color: $font--color;
    margin-bottom: 4px;
    transition: transform .2s ease, background-color .5s ease;
}

不幸的是，我无法编写任何有意义的jquery代码来处理此解决方案...

有人可以帮助我吗？

Answer 1

查看此代码：

var nav = $("#navbar").offset();
var $contentDivs = $(".division");
$(document).scroll(function() {
    $contentDivs.each(function(k) {
        var _thisOffset = $(this).offset();
        var _actPosition = _thisOffset.top - $(window).scrollTop();
        if (_actPosition < nav.top && _actPosition + $(this).height() > 0) {
            $("#navbar").removeClass("light dark").addClass($(this).hasClass("light") ? "light" : "dark");
            return false;
        }
    });
});

#navbar {
    position:fixed;
    top:10px;
    right:20px;
    height:100px;
}
#navbar.light {
    color:black;
}
#navbar.dark {
    color:white;
}
.division {
    width:100%;
    margin:0px;
    height:350px;
}
.division.dark {
    background:black;
}
.division.light {
    background:#f2f2f2;
}

<script src="https://use.fontawesome.com/ecdc7512a9.js"></script>
<script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
   
<div>
    <div id="navbar">
        <i class="fa fa-bars  fa-2x" aria-hidden="true"></i> 
        <span id="current"></span>
    </div>
    <div class="division light"></div>
    <div class="division dark"></div>
    <div class="division light"></div>
    <div class="division dark"></div>
    <div class="division light"></div>
    <div class="division dark"></div>
</div>