Kod w HTML, w którym dostęp do bibliotek jQuery i mój kod jQuery jest tutaj:

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<script src="script.js"></script>

JQUERY / JavaScript, który napisałem, czy to:

var main = function(){
    var navLocation = $('.nav').offset();
    if (navLocation.top < 0){
        $('.nav').addClass('navbar-fixed-top')
    }
}
$(document).ready(main);

Próbuję zrobić, to sprawić, aby Navbar stał się na szczycie strony, gdy przewijasz go, ale zamiast tego zwykle przewija stronę. Myślę, że przeglądarka ignoruje kod, ponieważ albo zawiedziłem dostęp do bibliotek jQuery lub z powodu błędu w kodzie, który napisałem osobiście. Jeśli ktoś może pomóc mi rozwiązać, bardzo go docenił.

2
ddgond 13 sierpień 2014, 04:25

2 odpowiedzi

Najlepsza odpowiedź

Problem

Funkcja main() jest wywoływana tylko po załadowaniu DOM, więc szanse, że wartość navLocation wynosi 0. Twoja funkcja nie zostanie ponownie wykonana po tym, aby nigdy nie dodać {{x2} } Klasa do menu .nav.

Rozwiązanie

Aby zaradzić sytuacji spróbuj zastąpić główną funkcję, tak jak:

var main = function(){
    $( window ).scroll(function() {
        if ($('.nav').offset().top < 0){
            $('.nav').addClass('navbar-fixed-top');
        }else{
            $('.nav').removeClass('navbar-fixed-top');
        }
    });
}

Wyjaśnienie

Dołączyłem przewód przewijania do okna, więc gdy użytkownik przewija to wydarzenie zostanie zwolnione, pozwalając na obliczenie, jeśli chcesz dodać lub usunąć klasę z nagłówka.

Alternatywy

Dostarczyłem JavaScript, powinien naprawić problem, w którym posiadając, ale polecam, aby spojrzeć na lepkie nagłówki za pomocą zwykłego CSS, ponieważ nie chcesz polegać na JavaScript, który jest włączony podczas ładowania elementów interfejsu użytkownika.

Nawet rozwiązanie jak position:fixed; byłoby lepiej, a następnie bawią się JavaScript.

0
Jacob Squires 13 sierpień 2014, 00:56

Twój kod jest nazywany dokładnie raz, gdy dokument jest gotowy. Jeśli w tym momencie .nav nie jest przewijany do ujemnego, nie doda klasy; W przeciwnym razie będzie. Jeśli chcesz, odpowiedzisz dynamicznie, musisz zainstalować Handler zdarzeń scroll. W takim przypadku prawdopodobnie prawdopodobnie chcesz mieć przypadek, w którym usuniesz klasę.

2
Amadan 13 sierpień 2014, 00:28