Change element class depending upon the position of the element

Question

I have some problem with this. Hope u can help me.

I created the menu in the fixed position. I would like it to change the color on some sections of my website.

Please look attachment to better understand

Actually I have some code:

My toggle menu:

<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>

Style for this menu:

.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;
}

And unfortunately I can't write any meaningful jquery code to handle this solution ...

Someone can help me with this?

Answer 1

check out this code:

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>