przeskakujacy div przy scrollowaniu

Question

0

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

 

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

 

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(function ($) {
    var scrollingStartDistance = $("#menu").offset().top;

    $(document).scroll(function () {
        var scrollTop = $(document).scrollTop();

        $("#menu").toggleClass("scrolling", scrollTop > scrollingStartDistance);
    });
});

 

Answer 1

A to normalne, dzieje się tak zapewne dlatego, że nawigacja po przyklejeniu się dostaje pozycję fixed, wiec jest wyrwana ze swojego miejsca a co za tym idzie nie zajmuje go już. Zatem element który był pod nią od razu w to miejsce wskakuje. Można mu nadać margin-top taki jak wysokość nawigacji w momencie jej przyklejenia.

Answer 2

zmienilem margin-top tak jak napisales, ale nie pomoglo. Zachowuje sie troche inaczej ale nadal przeskakuje, i cala reszta divow razem z nim. Nie wiem jak sobie z tym poradzic, a robie stronke dla kogos i pilnie potrzebuje pomocy

Answer 3

hej koledzy, może znajdzie się ktoś, kto mi pomoże. Problem pewnie błahy, a ja nie wiem jak to ugryźć

Comments

Zapakuj menu w jeszcze jednego diva(pustego), który wypełni przeztrzeń po "wyjęciu" menu.

---

pusty div załatwił sprawę. Wielkie dzięki.