One Page Nav + navbar fixed - problem z poprawnym odstępem

pytanie zadane 25 września 2015 w HTML i CSS przez testerius Pasjonat (23,960 p.)

No hej, słuchajcie mam pewien problem z nawigacją. Na stronie typu one page jest navbar, który po scrollowaniu dostaje klasę navbar-fixed (doczepiany jest do górnej krawędzi ekranu oraz zmniejsza się odrobinę padding).

Do płynnego scrollowania użyłem jQuery One Page Nav z którego zresztą kiedyś już korzystałem tworząc bardzo zbliżoną nawigację, co prawda wtedy używałem navbara z bootstrapa oraz dodatkowy skrypt - sticky.js, praktycznie taka sama funkcjonalność jaką chce uzyskać teraz ale bez sticky.

Niestety coś robię nie tak, ponieważ nie potrafię odpowiednio ustawić odstępu tak aby navbar nie zasłaniał tytułów, a dzieje się to wtedy gdy navbar nie ma jeszcze klasy navbar-fixed (tak mi się wydaje).

Demo codepen, a tutaj wersja full.

2 odpowiedzi

odpowiedź 26 września 2015 przez Adam Wojtaś Obywatel (1,300 p.)
wybrane 26 września 2015 przez testerius

Najlepsza

Cześć,

w pliku .js w lini 45 dodaj ten kod

if (scrollY > navbarY) {
  $('.navbar').addClass('navbar-fixed');
  $(".welcome").css("margin-top", "50px");
} else {
  $('.navbar').removeClass('navbar-fixed');
  $(".welcome").css("margin-top", "0px");
}

Ponieważ w chwili kiedy navbar dostaje klase navbar-fixed cała strona przesuwa się o jego wysokość do góry, dlatego navbar "nie widzi" tych 50px paddingu dodanych do section.

komentarz 26 września 2015 przez testerius Pasjonat (23,960 p.)

Niby działa jednak nadal występuje mały problem z odstępem a tutaj gdy już przejdziemy do innej sekcji i wrócimy. :P Tak czy siak będę się z tym męczył, może w końcu uda mi się to jakoś naprawić, dzięki za pomysł.

nowe demo

komentarz 26 września 2015 przez Adam Wojtaś Obywatel (1,300 p.)

50px wstawiłem jako przykład, wstaw 64px i będzie dobrze (tak jak powinno być).

Wtedy powinieneś ustawić +5px (bo tyle ma ten border-top dla sekcji) dla twojego "skrolowania".

Spakuj i wrzuć gdzieś twoją stronę, wtedy powiem ci jak to zrobić.

komentarz 26 września 2015 przez testerius Pasjonat (23,960 p.)

To 64px dla

$(".welcome").css("margin-top", "64px");

to metodą prób i błędów obliczyłeś, bo faktycznie po zmianie z 50 scroll wydaje się działać prawidłowo. Nie wiem co miałeś na myśli z tymi dodatkowymi 5px, fajnie jakbyś mógł bardziej rozwinąć o co ci chodziło.

Jak chcesz to możesz pobrać http://www.speedyshare.com/75Pak/testerius-nav.zip (aby np. testować lokalnie).

odpowiedź 26 września 2015 przez Czort Nałogowiec (32,500 p.)

.section:before{
  content:"";
  display:block;
  height:50px;
}

Po dodaniu tego do css niby nie zasłania ale z kolei pojawia się większy odstęp między h2 i borderem. W sumie nie wiem co lepsze

Ciekawy problem, jakbyś znalazł rozwiązanie to podziel się nim.

komentarz 26 września 2015 przez testerius Pasjonat (23,960 p.)

Border zaznaczyłem po to aby wiedzieć gdzie jest początek sekcji i właśnie w tym miejscu powinien stykać się navbar, tak jak tutaj. O coś takiego mi chodziło. :P