Sticky menu z kursu - dlaczego to u mnie nie działa?

pytanie zadane 8 lipca 2015 w JavaScript przez krecik1334 Maniak (58,390 p.)

<script src="jquery/jquery-1.11.3.js"></script>
	
	<script>

		$(document).ready(function() {
		var NavY = $('#navbar').offset().top;
		 
		var stickyNav = function(){
		var ScrollY = $(window).scrollTop();
			  
		if (ScrollY > NavY) { 
			$('#navbar').addClass('sticky');
		} else {
			$('#navbar').removeClass('sticky'); 
		}
		};
		 
		stickyNav();
		 
		$(window).scroll(function() {
			stickyNav();
		});
		});
		
	</script>

Mój div to #navbar, w kursie było .nav więc zmodyfikowałem. Jquery leży u mnie na serwie.

5 odpowiedzi

odpowiedź 8 lipca 2015 przez Comandeer Guru (601,550 p.)

Konsola coś rzuca? Odpowiednie style CSS są?

komentarz 8 lipca 2015 przez krecik1334 Maniak (58,390 p.)

Nie wiem nic o konsoli w JS, ale dzięki, CSS nie sprawdziłem - to pewnie przez to.

komentarz 8 lipca 2015 przez Comandeer Guru (601,550 p.)

To się dowiedz: jeśli masz Chrome/Firefoksa to znajdziesz ją pod F12 ;) Bardzo potężne narzędzie.

odpowiedź 8 lipca 2015 przez Anonim Mądrala (6,000 p.)

Nazwa pliku js to chyba jquery-1.11.3.min.js

komentarz 8 lipca 2015 przez Comandeer Guru (601,550 p.)

Jest przecież też developerska wersja jQuery, niezminifikowana

odpowiedź 8 lipca 2015 przez Eimens Maniak (69,240 p.)

1. Źle pobrana biblioteka,

2. Hmm może użyj classy a nie id i wpisz

w THML:

...

<div class="navbar"></div>

...

A w skrypcie tak:

<script src="jquery/jquery-1.11.3.js"></script>



    <script>

        $(document).ready(function() {

        var NavY = $('.navbar').offset().top;



        var stickyNav = function(){

        var ScrollY = $(window).scrollTop();



        if (ScrollY > NavY) {

            $('.navbar').addClass('sticky');

        } else {

            $('.navbar').removeClass('sticky');

        }

        };



        stickyNav();



        $(window).scroll(function() {

            stickyNav();

        });

        });



    </script>

Staram się pomóc, nie jestem pewien na 100% jak nie zadziałą to podeślij pliki

odpowiedź 8 lipca 2015 przez Czort Nałogowiec (32,500 p.)

Może dlatego, że to ma być klasa a nie id.

komentarz 8 lipca 2015 przez krecik1334 Maniak (58,390 p.)

Koniecznie musi być? Ja nigdy nie lubiłem dawać klas kiedy wiem że będzie tylko jeden element danego typu.

komentarz 8 lipca 2015 przez Czort Nałogowiec (32,500 p.)

Zawsze lepiej jest dać klasę niż id. Poza tym możesz spróbować czy będzie działać z klasą. To sekunda roboty:)

komentarz 8 lipca 2015 przez Comandeer Guru (601,550 p.)

Ale co to za różnica? jQuery bierze selektor, a nie klasę - można równie dobrze napisać to jeszcze inaczej, jako body > div:first-of-type i mamy sporą szansę, że trafimy.

Co do [id] i jednego elementu: i tak bym zaznaczył, że takie [id] służy do identyfikacji elementu/bycia elementem nawigacyjnym a do stylowania powinna służyć klasa (z powodu specyficzności selektorów)

komentarz 8 lipca 2015 przez Czort Nałogowiec (32,500 p.)

Niby tak logicznie myśląc, ale u mnie ta funkcja nie chciała działać po id nie wiedzieć czemu. A może problem był w czymś innym, nie jestem pewien. Sorry za wprowadzenie w błąd w takim razie.

komentarz 8 lipca 2015 przez krecik1334 Maniak (58,390 p.)

Zamienione na klasę, nie działa.

komentarz 8 lipca 2015 przez Czort Nałogowiec (32,500 p.)

Skrypt dałeś na samym dole w body? Może w css jest problem.

odpowiedź 2 grudnia 2018 przez owcaAkaKucharz Nowicjusz (140 p.)

Trochę nieaktualne wiem, ale właśnie przed chwilą jeszcze miałem taki sam problem, być może są osoby które dzisiaj też go będą mieć więc pisze co mi pomogło:

skrypt jest poprawny, problem był z klasą sticky, miałem ją zapisaną w osobnym dokumencie main.css. Gdy przepisałem klase sticky do głównego pliku index.html gdzie też mam skrypt zadziałało.

Prościej: umieść skrypt oraz klase sticky w jednym dokumencie najlepiej głównym index.html