przylepiajace się (sticky) menu - jquery

pytanie zadane 9 lutego 2016 w JavaScript przez gab123 Mądrala (5,230 p.)

Witam,

Ostatnio za pomocą Jquery tworze przylepiające (sticky) menu. Niestety nie wiem czemu ale nie działa. Kod czytałam pare razy i wydaję się ok. Pomożecię ?

<!DOCTYPE-HTML>
<html>
<head>

<meta charset = "utf-8"/> 
<link href='https://fonts.googleapis.com/css?family=Lato:400,900&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css"> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<meta http-equiv = "X-UA-Compatible" content = IE=edge,chrome=1" /> 
<style type="text/css">
#menu{
height:20px;
width:100%;
background-color:red;
}
</style>
</head>
<body>
<div id="logo" > Ja<span style = "color:red;font-size:36;text-decoration:italic;"> i programowanie </span></div>
<div id="menu" ></div>
<script>
var positionWindow = $(this).offset().top;
var Menu = $('#menu').offset().top ;

function menuS () {
if(positionWindow > Menu) {
 $('#menu').addClass('sticky') ;
}
else{
$('#menu').removeClass('sticky') ;
}
menuS() ;
}
menuS() ;
</script>

</body>
</html>

2 odpowiedzi

odpowiedź 9 lutego 2016 przez Sprytnykrzys Gaduła (3,900 p.)

A gdzie jest ciało klasy którą przełączasz? Nie brakuje przypadkiem czegoś takiego?

.sticky {

    position: fixed;

    width: 100%;

    left: 0;

    top: 0;

}

Co jednak najważniejsze, funkcja musi być wywoływana w odpowiednim momencie. Proponuje zdarzenie scroll :)

komentarz 9 lutego 2016 przez gab123 Mądrala (5,230 p.)

W gogle jak znalazłam ten sposób pomyślałam że jest to klasa wbudowana w jquery (nie było/albo przeoczyłam fragment o dodawaniu takiej klasy) .

Niestety aplikacja caly czas nie działa w konsoli jest taki komunikat :

TypeError: $(...).offset(...) is null.

Dziękuje za pomoc.

odpowiedź 9 lutego 2016 przez ScriptyChris Mędrzec (190,190 p.)

W jaki sposób Ty podłączasz czcionki Google oraz bibliotekę jQuery?

<link href='<a href="https://fonts.googleapis.com/css?family=Lato:400,900&subset=latin,latin-ext'" rel="nofollow" target="_blank" original-title="" title="">https://fonts.googleapis.com/css?family=Lato:400,900&subset=latin,latin-ext'</a> rel='stylesheet' type='text/css'>

<script type="text/javascript" src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ><="" script>"="" rel="nofollow" target="_blank" original-title="" title="">http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script></a>

Pierwszy raz widzę takie zapisy (tag <a href> wewnątrz href oraz src) i masz trochę bałagan w tych podpięciach, ale może jeszcze za mało widziałem i moje zdziwienie jest niepotrzebne :) Nie mniej jednak zobacz czy jQuery jest w ogóle "dostępne". Napisz w konsoli coś w stylu:

if (window.jQuery) 
{  
    console.log('jQuery dziala'); 
} 
else 
{
    console.log('Brak jQuery...');
}

Niestety aplikacja caly czas nie działa w konsoli jest taki komunikat :

TypeError: $(...).offset(...) is null

Jeśli ten błąd dotyczy pierwszej linijki, w której korzystasz z jQuery (linijka 22 w kodzie, który wstawiłaś), to możliwe że jQuery nie jest prawidłowo podpięte.

Nie wiem natomiast czy można w podobny sposób sprawdzić dostępność zewnętrznej czcionki, bo jak dla mnie również jest źle podpięta.

komentarz 9 lutego 2016 przez Arkadiusz Waluk Ekspert (287,950 p.)

Pierwszy raz widzę takie zapisy (tag <a href> wewnątrz href) i masz trochę bałagan w tych podpięciach, ale może jeszcze za mało widziałem i moje zdziwienie jest niepotrzebne :)

Tak, mało widziałeś, bo to nasz forumowy edytor zamienia wszystko na linki, nawet gdy wrzuca się coś w bloczek na kod ;)

komentarz 9 lutego 2016 przez ScriptyChris Mędrzec (190,190 p.)

Aha :) A, czy duplikowanie linku źródłowego jest też winą forumowego edytora?

komentarz 9 lutego 2016 przez Arkadiusz Waluk Ekspert (287,950 p.)

Linku źródłowego? Nie za bardzo wiem co miałeś na myśli, ale zapewne tak. Zobacz na swój post - skopiowałeś to co podał autor pytania, a w Twojej odpowiedzi tych linków jest jeszcze więcej... Po prostu edytor, który jest tutaj chce każdy wklejony link nawet jako kod zamieniać na kod HTML (czyli dodaje <a href...>), tak aby po wyświetleniu posta link stał się klikalny. No i przez to wychodzi co wychodzi ;)