¡Bienvenido a stackoverflow!
Ya que en muchas ocasiones cuando realizamos una acción en un sentido suele ser necesario o común buscar la acción de regreso, retorno o "volver al estado inicial" te expongo un ejemplo muy sencillo, completo y funcional donde podrás observar como funciona. Puede que no sea necesario en tu caso, en tal caso solo sería eliminar la segunda función.
Creo que el código queda algo mas estructurado y legible realizando el control con una función específica a modo de toggle
. Como he visto que haces uso de Jquery, aprovechemos esta función, en caso negativo solo tendrás que "adaptar" de Jquery a Javascript, si tienes problemas con ello realiza un comentario y completo la respuesta.
El ejemplo es muy sencillo, realizo una web con un contenido aproximado de 3000px, para que puedas probarlo en una pantalla grande. El background está en rojo, una vez sobrepasas el "breakpoint" marcado en 1000px, cambia a verde, y de vuelta al regresar se torna rojo de nuevo. He agregado de forma adicional un console.log para facilitar la comprensión del píxel en el que se encuentra el scroll.
$(document).ready(function() {
const breakpoint = 1000;
$(window).scroll(function() {
toggleActionByBreakpoint(breakpoint)
})
function toggleActionByBreakpoint(breakpoint) {
console.log($(this).scrollTop());
const isScrollOnPosition = $(this).scrollTop() > breakpoint;
const isScrollReturnedPosition = $(this).scrollTop() < breakpoint;
if (isScrollOnPosition) {
$("body").css('background-color', 'green');
};
if (isScrollReturnedPosition) {
$("body").css('background-color', 'red');
}
}
});
#separator {
margin-top: 1000px;
}
#separator-2 {
margin-top: 100px;
margin-bottom: 50px;
}
#position-to-detect {
margin-top: 50px;
margin-bottom: 2000px;
}
body {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Action on scroll position</title>
</head>
<body>
<div id="separator"></div>
1000px
<div id="separator-2"></div>
1100px
<div id="position-to-detect"></div>
1150px
</body>
</html>
No olvides marcar la respuesta como "válida y/o resuelta si soluciona el problema con el fin de ayudar a otros a enriquecerse del contenido.
Espero que te ayude!
Saludos!