Polska Pomoc Simple Machines Forum - www.smf.pl

Pozostałe => Webmaster => Wątek zaczęty przez: Adrian w 3 Maj 2014, 14:36

Tytuł: Skrypt jQuery nie chce działac na Operze i FF
Wiadomość wysłana przez: Adrian w 3 Maj 2014, 14:36
Mam taki mały problem, może ktoś zna lepiej jQuery niz ja i wie w czym będzie problem.
Napisałem coś takiego:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$(document).ready(function () {
menubar3();
});

$(window).scroll(function () {
menubar3();
});

function menubar3() {
if (document.body.scrollTop > 345)
$(\'#menubar3\').stop().animate({"top": \'0\'});
else
$(\'#menubar3\').stop().animate({"top": \'-345\'});
}
});//]]> 
</script>

Skrypt ma za zadanie pokazać pasek menu po przewinięciu strony w dół. Niestety w obecnej postaci działa tylk ow Google Chrome. FF oraz Opera nie pokazuje menu.
Ma ktoś pomysł dlaczego?
Tytuł: Odp: Skrypt jQuery nie chce działac na Operze i FF
Wiadomość wysłana przez: jan127 w 2 Grudzień 2014, 13:11
po pierwsze usuń wszystkie znaki forward slash np. $(\'#menubar3\') na $('#menubar3'). Po drugie firefox ma inny przelicznik document.body.scrollTop zmniejsz jego wartość przy if na mniejszy i wypróbuj w firefoxie lub pokaż aktualną pozycję za pomocą console.log(document.body.scrollTop) oraz na tej podstawie ustaw sobie wartość
Tytuł: Odp: Skrypt jQuery nie chce działac na Operze i FF
Wiadomość wysłana przez: Adrian w 2 Grudzień 2014, 13:21
Po pierwsze nie forward slash tylko backslash, jeśli już tak piszemy.
Po drugie temat trochę stary, no ale jeśli ma to komuś pomóc kiedyś to niech już zostanie.
Po trzecie - problem rozwiązałem takim sposobem:
<script>
$(window).scroll(function() {   
$("#menu_nav").removeClass("fixed_menu");
$("#wrapper").removeClass("wrapper_margin_top");

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

if (scroll > 161) {
$("#menu_nav").addClass("fixed_menu");
$("#wrapper").addClass("wrapper_margin_top");
}
});
</script>

Szczegóły stylu CSS raczej nie muszą być wyjaśnione (dodane tylko position: fixed;). Efekty rozwijania i chowania z użyciem CSS3 (transition: top .5s ease-out 0s, background 1s linear 0s;).