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

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:

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

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

odpowiedź 7 maja 2015 przez Progo Bywalec (2,020 p.)

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.