Przeskakujący div

Cześć,
mam taki problem, menu gdy dojeżdża do górnej krawędzi okna to prawidłowo się przykleja, ale div znajdujący się bezpośrednio pod nim przeskakuje i znika. Potem już idzie normalnie. Nie wiem czy to problem w jquery czy może tylko css. Będę bardzo wdzięczny za pomoc

html

<div>contentcontent</div>
<div>contentcontent</div>
<div>contentcontent</div>
<div id="menu">menu</div>
<div><br><br><br>contentcontent1</div>
<div><br><br>contentcontent2</div>
<div><br><br>contentcontent3</div>
<div><br><br>contentcontent4</div>
<div><br><br>contentcontent5</div>
<div><br><br>contentcontent6</div>
<div><br><br>contentcontent7</div>
<div><br><br>contentcontent8</div>

css

div{
  height: 90px;
  border:1px solid red;
  color: white;
}
#menu {
    background-color: green;
    position:relative;
}
#menu.scrolling {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

jquery

jQuery(function ($) {
    var scrollingStartDistance = $("#menu").offset().top;

    $(document).scroll(function () {
        var scrollTop = $(document).scrollTop();
        
        $("#menu").toggleClass("scrolling", scrollTop > scrollingStartDistance);
    });
});

nigdzie nie znika tylko znajduje się pod menu któremu dałeś position: fixed;

sprawdź sobie jak działa position: fixed; a zrozumiesz co się stało i znajdziesz odpowiednie rozwiązanie dla swojego problemu

pozdrawiam