• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Nie działa "przyklejone menu przy przewijaniu strony" w javascripcie

VPS Starter Arubacloud
0 głosów
1,257 wizyt
pytanie zadane 7 maja 2015 w JavaScript przez Gandalf Obywatel (1,260 p.)
edycja 7 maja 2015 przez Gandalf

Witam, chciałem zrobić podobne menu jak na tej stronie:

http://jsfiddle.net/karalamalar/grnQA/

ale, podstawiając u siebie kod w pliku html, css nie działa mi kod, a napisałem tak:
 

<script type="text/javascript">
	function fixDiv() 
	{
		var $cache = $('#menu'); 
			if ($(window).scrollTop() > 100) 
				$cache.css({'position': 'fixed', 'top': '10px'}); 
			else
				$cache.css({'position': 'relative', 'top': 'auto'});
	}
	$(window).scroll(fixDiv);
	fixDiv();
</script>

<div id="menu">"To jest test do przesuwania na stronie"</div>
	

a w style.css ustawiłem:

#menu
{
	width: 1000px;
	height: 50px;
	background-color: #008080;
	margin-top: 30px;
	text-align: center;
	font-size: 30px;
	line-height: 150%;
	border-radius: 6px;
}

Ale mino wszystko nie działa, tak jak w przykładzie w linku. Nie wiem gdzie istnieje błąd, proszę pomóżcie..

3 odpowiedzi

+1 głos
odpowiedź 7 maja 2015 przez Robert Saternus Stary wyjadacz (12,180 p.)
Popraw to co mówił Progo, ale to pewnie nie wystarczy.

Musisz oczywiście podpiąć bibliotekę jQuery, ponieważ ten  kod JS właśnie na niej bazuje.

W sekcji <head> wklej to:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

Powinno pomóc.
komentarz 7 maja 2015 przez SyntaxError Pasjonat (17,170 p.)
Przecież ma podpięte na jsfiddle xd
komentarz 7 maja 2015 przez Gandalf Obywatel (1,260 p.)
Rzeczywiście brakowało podpiąć biblioteke jquery, bo z nazewnictwem wiązał się inny przykład i w css zapomniałem zmienić, dzięki wielkie za pomoc! :)
komentarz 7 maja 2015 przez SyntaxError Pasjonat (17,170 p.)
A to musiałeś podpiąć zanim wszedłem. :D
0 głosów
odpowiedź 7 maja 2015 przez Progo Bywalec (2,020 p.)
W css zamień #navi na #menu
0 głosów
odpowiedź 7 maja 2015 przez Gandalf Obywatel (1,260 p.)
A jeszcze mam takie pytanie, jakbym chciał aby to menu przyklejało się w momencie "dotarcia do linii menu" i płynniej a nie tak szybko, to co powinienem zmienić w tych ustawieniach?
komentarz 7 maja 2015 przez Robert Saternus Stary wyjadacz (12,180 p.)
http://www.sutanaryan.com/how-to-create-fixed-menu-when-scrolling-page-with-css-and-jquery/

Ja z tego kożystałem i działa jak należy. Ogólnie wydaje mi się, że w Twoim kodzie masz błąd z wartościami w px, więc wzoruj się na tym linku powyżej.
komentarz 7 maja 2015 przez Gandalf Obywatel (1,260 p.)
próbowałem Twoim sposobem, ale wtedy całe menu mi się rozjeżdża, a może źle nazwy klas definiuje, albo w CSS, wartości są za duże.

Podobne pytania

0 głosów
2 odpowiedzi 1,163 wizyt
pytanie zadane 23 maja 2015 w JavaScript przez Robert Saternus Stary wyjadacz (12,180 p.)
0 głosów
4 odpowiedzi 14,565 wizyt
0 głosów
1 odpowiedź 877 wizyt
pytanie zadane 19 lutego 2017 w JavaScript przez Allen Obywatel (1,010 p.)

93,019 zapytań

141,982 odpowiedzi

321,283 komentarzy

62,365 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 2

Można już zamawiać tom 2 książki "Wprowadzenie do bezpieczeństwa IT" - będzie to około 650 stron wiedzy o ITsec (17 rozdziałów, 14 autorów, kolorowy druk).

Planowana premiera: 30.09.2024, zaś planowana wysyłka nastąpi w drugim tygodniu października 2024.

Warto preorderować, tym bardziej, iż mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy dodatkowe 15% zniżki! Dziękujemy zaprzyjaźnionej ekipie Sekuraka za kod dla naszej Społeczności!

...