Scroll function firing multiple times when passing anchor

I have a scroll function, when a certain anchor reaches the top of the screen, run the correct function ONCE.

When user scrolls back up, and passes past the anchor at the bottom of screen, it must run the correct function again, once.

Either way you scroll should trigger the functions, once.

See code below –

function changeMenu(thisLink, ballName){

    var linkChange = $('a[target="_blank" rel="nofollow" href="' + '#' + thisLink + '"]');
    
    $(".scroll-to").removeClass("active");
    
    linkChange.addClass('active');
    
    $('#ball').removeClass();
    
    $('#ball').addClass(ballName);

}

var home_offset = $('#homeCont').offset().top;
var work_offset = $('#workCont').offset().top;
var about_offset = $('#aboutCont').offset().top;

$(window).scroll(function () {
    if ( $(window).scrollTop() > home_offset ){
        $(this).trigger("homeTrig");
    }
    
    if ( $(window).scrollTop() > work_offset ){
        $(this).trigger("workTrig");
    }
    
    if ( $(window).scrollTop() > about_offset ){
        $(this).trigger("aboutTrig");
    }
})

.on("homeTrig", function () {
    changeMenu('homeCont', 'ballHome');
    console.log('Trigger Home');
})

.on("workTrig", function () {
    changeMenu('workCont', 'ballWork');
})

.on("aboutTrig", function () {
    changeMenu('aboutCont', 'ballAbout');
});
/*MENU STYLES*/

.menu-container {
	position: fixed;
    top: 50px;
    right: 50px;
    z-index: 1;
}

.menu-label{
    position: absolute;
    right: 0;
    z-index: 2;
}

line{
    -webkit-transition: transform 0.4s ease;
    -moz-transition: transform 0.4s ease;
    -o-transition: transform 0.4s ease;
    transition: transform 0.4s ease;
}

#menuIcon {
	cursor: pointer;
}

#menuIcon:hover #botPath{
    transform: translate(0px, -130px);
}

#menuIcon:hover #topPath{
    transform: translate(0px, 130px);
}

/*MENU NAV STYLES*/

input#menuCheck:checked ~ .menu-nav-container{
    opacity: 1;
    height: 100%;
    z-index: 2;
}

.menu-nav-container {
    position: relative;
    opacity: 0;
	margin-top: 40px;
    height: 0;
    z-index: -999;
    -webkit-transition: opacity 0.4s ease;
    -moz-transition: opacity 0.4s ease;
    -o-transition: opacity 0.4s ease;
    transition: opacity 0.4s ease;
}

#menuNav {
    float: right;
    display: block;
}

.menu-list {
    float: left;
    margin-top: 10px;
}

.menu-item {
	font-size: 2em;
    text-transform: uppercase;
    color: #6d6d6d;
    cursor: pointer;
    -webkit-transition: opacity 0.4s ease;
    -moz-transition: opacity 0.4s ease;
    -o-transition: opacity 0.4s ease;
    transition: opacity 0.4s ease;
}

.menu-item a{
    color: #6d6d6d;
}

.menu-item:hover {
	opacity: 1;
}

.inactive {
	opacity: 0.2;
}

.active {
	opacity: 1;
}

#ball {
	transform: translate(0, 25px);
    -webkit-transition: transform 0.4s ease;
    -moz-transition: transform 0.4s ease;
    -o-transition: transform 0.4s ease;
    transition: transform 0.4s ease;
    transform: translate3d(0,25px,0);
}

#ball.ballWork{
    transform: translate3d(0, 25px, 0);
}

#ball.ballWork{
    transform: translate3d(0, 130px, 0);
}

#ball.ballAbout{
    transform: translate3d(0, 230px, 0);
}

#home {
	padding: 5px 0 20px 0;
}

#work {
	padding-bottom: 20px;
}

.home-container {
	position: relative;
    height:100vh;
}

.work-container {
	height: 800px;
}

.about-container{
    height: 1400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="menu-container">
  <input type="checkbox" id="menuCheck">
  <label for="menuCheck" class="menu-label">
                    <svg version="1.1" id="menuIcon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                         width="40px" height="20px" viewbox="0 0 500 310" enable-background="new 0 0 500 310" xml:space="preserve">
                    <line id="topPath" fill="none" stroke="#6D6D6D" stroke-width="40" stroke-miterlimit="10" x1="3" y1="21.695" x2="498" y2="21.695"/>
                    <line id="midPath" fill="none" stroke="#6D6D6D" stroke-width="40" stroke-miterlimit="10" x1="3" y1="154.5" x2="498" y2="154.5"/>
                    <line id="botPath" fill="none" stroke="#6D6D6D" stroke-width="40" stroke-miterlimit="10" x1="3" y1="287.305" x2="498" y2="287.305"/>
                    </svg>
                </label>

  <div class="menu-nav-container">
    <svg version="1.1" id="menuNav" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="25" height="260" viewbox="0 0 22.333 500" enable-background="new 0 0 22.333 500" xml:space="preserve">
                        <line id="line" fill="none" stroke="#6D6D6D" stroke-width="2" stroke-miterlimit="10" x1="10.948" y1="1" x2="10.948" y2="307"/>
                        <circle id="ball" fill="#6D6D6D" cx="10.948" cy="28.16" r="8.636"/>
                    </svg>

    <ul class="menu-list">
      <li class="menu-item" id="home"><a target="_blank" rel="nofollow" href="#homeCont" class="scroll-to inactive active" onclick="changeMenu('homeCont', 'ballHome')">Home</a></li>
      <li class="menu-item" id="work"><a target="_blank" rel="nofollow" href="#workCont" class="scroll-to inactive" onclick="changeMenu('workCont', 'ballWork')">Work</a></li>
      <li class="menu-item" id="about"><a target="_blank" rel="nofollow" href="#aboutCont" class="scroll-to inactive" onclick="changeMenu('aboutCont', 'ballAbout')">About</a></li>
    </ul>

  </div>
</div>

<div class="content-container home-container col-12" id="homeCont">
                <div class="particle-bg"></div>
                <div class="logo-container">
                    <img class="logo" src="img/dSteynLogo.png">
                    <h1 class="logo-heading">darian steyn</h1>
                </div>
                
                <a target="_blank" rel="nofollow" href="#workCont" class="scroll-down toWork scroll-to"></a>
            </div><!--END OF HOME CONTAINER-->
            
            <div class="content-container work-container col-12" id="workCont">
                
                <a target="_blank" rel="nofollow" href="#aboutCont" class="scroll-down toAbout scroll-to"></a>
            </div><!--END OF WORK CONTAINER-->
            
            <div class="content-container about-container col-12" id="aboutCont">
            
            </div><!--END OF ABOUT CONTAINER-->


You can do this by tracking whether you are above or below each anchor. I did this with a simple variable underAnchors in you snippet. Then trigger your function only when the value changes.