Tabela blokująca się po czasie - fixed?

Dla specjalistów Webmastering
#1

Witam,

#2

Do tego jeszcze js potrzebny.

Zobacz np. http://www.hongkiat.com/blog/css-sticky-position/

#3

Mam taki kod:

script language="JavaScript" type="text/javascript"
var elementPosition = $('#navigation').offset();

$(window).scroll(function(){
        if($(window).scrollTop() elementPosition.top){
              $('#navigation').css('position','fixed').css('top','0');
        } else {
            $('#navigation').css('position','static');
        }    
});
/script
style type="text/css"
whiteboard{
    background-image:url(http://krystalrae.com/img/krystalrae-2012-fall-print-leopard-sketch.jpg);
    background-position: center;
    padding: ;
    background-color: #fff;
    z-index: 1000;
    width: 100%;
}
/style
style type="text/css"
h1{
    -webkit-font-smoothing: antialiased;
        display:inline-block;
      font: 800 1.313em "proxima-nova",sans-serif; 
      padding: 10px 10px;
      margin: 20px 20px;
      letter-spacing: 8px;
      text-transform: uppercase;
        font-size:3.125em;
        text-align: center; 
        max-width: 606px;
line-height: 1.45em;
position: scroll;
    background-color:#e94f78;
    text-decoration: none;
    color:yellow;
    background-image:url;
}

h1 a{
   text-decoration: none;
   color:yellow;
           padding-left: 0.15em;
}
/style

i coś takiego:

div class="whiteboard" id="navigation"
          h1a href="#"HELLO GUYS/a/h1/div

Wszystko jest z tąd 

a ja nadal nie wiem czego mi brakuje żeby działało jak trzeba. Pomoże ktoś?

#4

Skrócona wersja z podanego fiddle’a: http://jsfiddle.net/jpXjH/109/

#5

Gdzie znajdę do tego bibliotekę i jak ją dodać? 

#6

Bibliotekę jq możesz pobrać z tej lub tej strony (ppm na link z “Download the compressed…” lub “minified” w nazwie i klik na “Zapisz element docelowy jako”, zostaje tylko wybór wersji)

Podpinasz poprzez dodanie do kodu strony (przeważnie/standardowo) do sekcji “head” tego typu wiersz:

<script src="ścieżka_do_pliku_jq"></script>

Przykład podpięcia bez pobierania (biblioteka ładowana z zewnętrznego źródła):

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

Przykład podpięcia pobranej biblioteki (plik js w tym samym miejscu co plik strony):

<script src="jquery-2.1.0.min.js"></script>

PS. Bym zapomniał jeszcze o jednym (akurat ma to związek z fiddle’em), jeśli skrypt nie zadziała, to najprawdopodobniej będziesz musiał go dodatkowo “ubrać” w parametr określający moment jego załadowania/wykonania (na wymienionej stronie jest on określany przez “wyklikanie” z drugiej rozwijanej listy opcji, domyślnie chyba jest “onLoad”), czyli np. $(window).load(function(){…kod js ze strony…}); lub $(document).ready(function() {…kod js ze strony…});.

Przykład z użyciem pierwszego:

$(window).load(function(){
var elementPosition = $('#navigation').offset();

$(window).scroll(function(){
        if($(window).scrollTop() > elementPosition.top){
              $('#navigation').css('position','fixed').css('top','0');
        } else {
            $('#navigation').css('position','static');
        }    
});
});
#7

wszystko ok, tylko jest problem przy przejściu w dół. Znika cały css i pojawia się tylko sam napis bez tła itd. Po powrocie w górę wszystko wraca do normy. Nie wiem czy to wina absolute bo jak zmieniam na fixed to wiadome że jest ok, ale wtedy nie jest to ten efekt który chce uzyskać bo wszystko jest w jednym miejscu bez względu na zmienianie pozycji strony. Może to zależy od else static ale java jest mi odległą galaktyką. . .

#8

A czemu nadajesz pozycjonowanie absolutne i w czym je wpisujesz (css/js)?

Skrypt ma za zadanie zmianę pozycjonowania na “fixed” (“przykleja” obiekt strony w określonym miejscu) dla obiektu “#navigation” gdy ten podczas przewijania strony znajdzie się na górze “top zero (0)”, w innych przypadkach obiektowi ma być przywracana domyślna wartość pozycji, czyli “static”.