Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [JavaScript]Problem z divem, który ma być na stałe podczas scrollowania
karteg
post
Post #1





Grupa: Zarejestrowani
Postów: 6
Pomógł: 0
Dołączył: 3.07.2015

Ostrzeżenie: (0%)
-----

Witam,
mam następujący problem:

Chodzi o skrypt w jquery. Chodzi o tę stronę www:
http://www.frameart.pl/xx/index.html

Na tej stronie znajduje się czarny pasek - DIV nawigacyjny (linki: start, o mnie galeria), który jest umieszczony na stałe. Problem polega na tym, że jak przewijamy stronę w dół, to on prawie że na samym początku na chwilę znika, a nie powinien. Powinien jakby przykleić się do krawędzi zdjęcia (banera). Po prostu przeskakuje. Nie wiem co jest tego przyczyną. Ten skrypt pisał mi ktoś, a ja tego niestety nie ogarniam. Jakbyś ktoś z Was mógłby mi pomóc i poprawić tak, żeby było ok. to będę dozgonnie wdzięczny.

Poniżej wklejam kod skryptu umieszczonego w pliku index.html


Kod
<script>
    
    function isScrolledIntoView(elem) {
         var docViewTop = $(window).scrollTop();
                    var docViewBottom = docViewTop + $(window).height();
                    var elemTop = $(elem).offset().top;
                                                                                    
                    return (elemTop < docViewTop);
  }
      
            
            
    $(window).scroll(function() { //.addclass .hasclass
                              
        if(isScrolledIntoView($('#cos'))) {
                $('#pudelko1_3').css('position','fixed').css('top',0);
                $('#pudelko1_3').addClass('fixed').removeClass('relative');
        }
        else {
            $('#pudelko1_3').css('position','relative').css('top',0);
            $('#pudelko1_3').addClass('relative').removeClass('fixed');
        }
        
        });
    
    
    
    
    
    $(document).ready(function() {
$('.zaznaczenie').click(function(){

    //console.log($(this).attr('href'))
        pozycja = $($(this).attr('href')).position().top;
        if($('#pudelko1_3').hasClass('fixed')) {
            pozycja -= 84;
        }
        else {
            pozycja -= 168;
        }

$('html, body').animate({scrollTop:pozycja}, 'slow');
return false;
});
});
    
</script>



A tutaj jest cała zawartość pliku index.html:


Kod
<html xmlns:fb="http://ogp.me/ns/fb#">
<head>
<title>...</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<meta http-equiv="content-language" content="pl">

<link href="style.css" rel="Stylesheet" type="text/css">


<!-- load jQuery and the plugin -->
<script src="jquery-2.1.4.js" type="text/javascript"></script>



<!-- background-position: static - DAJE NA DIVA -->





<style type="text/css">
a {color: black;
     text-decoration: none;
  }

a:hover {color: red;
                 text-decoration: none;      
        }
                

a.miniaturki {color: black;
                      text-decoration: none;
                         }


a.miniaturki:hover {color: black;
                    text-decoration: none;
                                     }
                                    
                                     #cos {
                                        height : 2000px;
                                        color: black;
                                        border: 1px solid red;
                                     }
</style>

</head>




<body>
    
      <div id="pudelko1_4">
        </div>

       <div id="pudelko1_3">
        
                         <a class="zaznaczenie" href="#pudelko1_4">
                   <div id="pudelko1_3c" class="przycisk">  
                   START</div></a>
            
              <a class="zaznaczenie" href="#abc">
              <div id="pudelko1_3a" class="przycisk">
                        O mnie
                  </div></a>
            
                   <a class="zaznaczenie" href="#def">
                   <div id="pudelko1_3b" class="przycisk">
                   Galeria
                   </div></a>
          
                  
            
                   <a class="zaznaczenie" href="strony/kontakt.php">
                   <div id="pudelko1_3d" class="przycisk">  
                         Kontakt</div></a>
                              
    </div>
        
        <div id="cos">
        
        <p>
        
        
<!-- ZE WZGLĘDU NA BARDZO DŁUGI TEKST, TO NIE BĘDĘ GO WKLEJAŁ W CAŁOŚCI - TYLKO TEN KAWAŁEK TAM , GDZIE SĄ ODNIESIENIA DO POSZCZEGÓLNYCH FRAGMENTÓW TEKSTY. CHODZI O TO, ŻE A HREF JEST ZAKOTWICZONY Z POSZCZEGÓLNYMI FRAGMENTAMI TEKSTU -->


<br /><br /><br /><br /><br /><br /><br />

<div id="abc" style="border: 1px solid red;">
<p>AAAAAAAAAAAAAA W latach 1772–1795 ziemie Rzeczypospolitej zostały rozdzielone przez sprzymierzonych zaborców: Prusy, Rosję i Austrię. W 1918 Polska odzyskała niepodległość jako II Rzeczpospolita, w 1939 została zaatakowana przez III Rzeszę i ZSRR i podzielona między III Rzeszę, ZSRR, Litwę kowieńską[9][10] i Słowację. Był to bezpośredni powód wybuchu II wojny światowej w Europie. W następstwie wojny życie utraciło ponad 6 milionów obywateli Polski, a państwo stało się republiką socjalistyczną uzależnioną od ZSRR.
Wydarzeniem, które stanowiło pierwszy krok na drodze ku powstaniu państwa polskiego, było objęcie władzy nad plemieniem Polan przez ród Piastów. Nastąpiło to w nieznanych okolicznościach i czasie, najprawdopodobniej jednak w drugiej połowie IX wieku. Główny ośrodek państwa Polan stanowiło Gniezno. Pierwszym historycznym władcą piastowskim był natomiast książę Mieszko I, chociaż późniejszy (XII w.) kronikarz Gall Anonim podaje także imiona jego przodków.
</p>
</div>


<!-- PÓŹNIEJ JEST PRZERWA -->

<br /><br /><br /><br /><br /><br /><br />

<div id="def" style="border: 1px solid red;">
<p>AAAAAAAAAAAAAA W latach 1772–1795 ziemie Rzeczypospolitej zostały rozdzielone przez sprzymierzonych zaborców: Prusy, Rosję i Austrię. W 1918 Polska odzyskała niepodległość jako II Rzeczpospolita, w 1939 została zaatakowana przez III Rzeszę i ZSRR i podzielona między III Rzeszę, ZSRR, Litwę kowieńską[9][10] i Słowację. Był to bezpośredni powód wybuchu II wojny światowej w Europie. W następstwie wojny życie utraciło ponad 6 milionów obywateli Polski, a państwo stało się republiką socjalistyczną uzależnioną od ZSRR.
Wydarzeniem, które stanowiło pierwszy krok na drodze ku powstaniu państwa polskiego, było objęcie władzy nad plemieniem Polan przez ród Piastów. Nastąpiło to w nieznanych okolicznościach i czasie, najprawdopodobniej jednak w drugiej połowie IX wieku. Główny ośrodek państwa Polan stanowiło Gniezno. Pierwszym historycznym władcą piastowskim był natomiast książę Mieszko I, chociaż późniejszy (XII w.) kronikarz Gall Anonim podaje także imiona jego przodków.
</p>
</div>

<!-- PÓŹNIEJ JEST PRZERWA -->

<script>
    
    function isScrolledIntoView(elem) {
         var docViewTop = $(window).scrollTop();
                    var docViewBottom = docViewTop + $(window).height();
                    var elemTop = $(elem).offset().top;
                                                                                    
                    return (elemTop < docViewTop);
  }
      
            
            
    $(window).scroll(function() { //.addclass .hasclass
                              
        if(isScrolledIntoView($('#cos'))) {
                $('#pudelko1_3').css('position','fixed').css('top',0);
                $('#pudelko1_3').addClass('fixed').removeClass('relative');
        }
        else {
            $('#pudelko1_3').css('position','relative').css('top',0);
            $('#pudelko1_3').addClass('relative').removeClass('fixed');
        }
        
        });
    
    
    
    
    
    $(document).ready(function() {
$('.zaznaczenie').click(function(){

    //console.log($(this).attr('href'))
        pozycja = $($(this).attr('href')).position().top;
        if($('#pudelko1_3').hasClass('fixed')) {
            pozycja -= 84;
        }
        else {
            pozycja -= 168;
        }

$('html, body').animate({scrollTop:pozycja}, 'slow');
return false;
});
});
    
    
    
    
    
    
</script>
</html>



Index.html zawiera też podpięty plik css: style.css

jeśli ktoś będzie potrzebował zawartość tego pliku, to dołączę


Z góry dziękuję za pomoc i pozdrawiam
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 4)
nowicjuszek
post
Post #2





Grupa: Zarejestrowani
Postów: 6
Pomógł: 0
Dołączył: 7.07.2015

Ostrzeżenie: (0%)
-----

w sekcji head zamieszczasz:
[HTML] pobierz, plaintext 
  1. <link rel="Stylesheet" type="text/css" href="css.css">
  2. <script type="text/javascript" src="ruchomydiv.js"></script>
[HTML] pobierz, plaintext

Kod css:
[HTML] pobierz, plaintext 
  1. * {margin:0;padding:0;}
  2. body {padding:10px;}
  3. #top {background: #ccc; height: 200px;}
  4. #menu {background:#111; color: #fff; width: 200px;}
  5. #bottom {background: #ccc; height: 800px;}
  6. .fixed {position: fixed; top:0; left:10px; opacity: 0.7;}
  7. .static {position: static;}
[HTML] pobierz, plaintext

Poniższy kod zapisujesz pod nazwą ruhomydiv.js:
[HTML] pobierz, plaintext 
  1. $(function(){
  2.     var menu = $('#menu'); // element zawierający menu
  3.     var menuPositionTop = menu.position().top; // sprawdzamy początkową pozycję menu
  4.  
  5.     $(window).scroll(function () { // przypisujemy funkcję do zdarzenia 'scroll'
  6.         if(parseInt($(window).scrollTop()) > menuPositionTop) {
  7.  
  8.             // sprawdzamy czy scroll "przejechał" przez wysokość, na której znajduje się menu.
  9.             // MUSIMY sprawdzić, czy jest większa od położenia menu. Nie da się zrobić porównania "if (parseInt($(window).scrollTop()) == menuPositionTop)"
  10.             // ponieważ scroll nie przelatuje po wszystkich wartościach po kolei, tylko "przeskakuje" wartości, tym więcej im szybciej machamy scrollbarem ;)
  11.             // a więc jesli w warunku byłoby porównanie, to możemy po prostu nie trafić na pożądaną wartosć $(window).scrollTop()
  12.  
  13.             if (menu.hasClass('static')) { // ten warunek nie jest konieczny, ale gdy go dodamy unikamy niepotrzebnego usuwania i dodawania klasy. to samo można zrobić za pomocą funkcji .css()
  14.                 menu.removeClass('static').addClass('fixed'); // zmieniamy pozycję ze static na fixed zamieniając klasy
  15.             }
  16.         }
  17.  
  18.         else {
  19.  
  20.             if (menu.hasClass('fixed')) { // podobnie jak warunek powyżej. też nie jest konieczny
  21.                 menu.removeClass('fixed').addClass('static');  // zmieniamy pozycję z fixed na static zamieniając klasy
  22.             }
  23.         }
  24.     });
  25.  
  26. });
[HTML] pobierz, plaintext


Plik index.html:
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <link rel="Stylesheet" type="text/css" href="css.css">
  4. <script type="text/javascript" src="ruchomydiv.js"></script>
  5. </head>
  6. <body>
  7. <div id="top">top</div>
  8. <div id="menu" class="static">menu</div>
  9. <div id="bottom">bottom</div>
  10. </body>
  11. </html>
[HTML] pobierz, plaintext


Wszytkie pliki wrzucasz do jednego katalogu i działa.

Źródło: http://www.forumweb.pl/css/div-przesuwajac...a-ekranie,66447 od użytkownika: wujekbogdan

Ten post edytował nowicjuszek 11.07.2015, 10:52:38
Go to the top of the page
+Quote Post
karteg
post
Post #3





Grupa: Zarejestrowani
Postów: 6
Pomógł: 0
Dołączył: 3.07.2015

Ostrzeżenie: (0%)
-----

Bardzo Ci dziękuję za pomoc. Nie wiem czemu, ale to nie przesuwa mi się.

W sekcji head chyba zapomniałeś dodać to:
<script src="jquery-2.1.4.js" type="text/javascript"></script>

więc to u sibie dodałem

w tym samym folderze co index.html znajduje się (chyba najnowszy) query-2.1.4.js

zrobiłem tak samo jak podałeś mi... i nie działa

wrzuciłem stronkę na ftpa:

www.frameart.pl/xxx/index.html

Mój plik index.html wygląda teraz tak:


Kod
<html>

    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta http-equiv="content-language" content="pl">
        
        
    <link rel="Stylesheet" type="text/css" href="style.css">
        
        
        <script type="text/javascript" src="ruchomydiv.js"></script>
        <script src="jquery-2.1.4.js" type="text/javascript"></script>
    
        
        </head>

    <body>
    <div id="top">top</div>
<div id="menu" class="static">menu</div>
<div id="bottom">bottom</div>
    </body>

        
</html>



mój plik ruchomydiv.js wygląda tak:
Kod
$(function(){
                var menu = $('#menu'); // element zawierający menu
                var menuPositionTop = menu.position().top; // sprawdzamy początkową pozycję menu
                
                $(window).scroll(function () { // przypisujemy funkcję do zdarzenia 'scroll'
                    if(parseInt($(window).scrollTop()) > menuPositionTop) {
                        // sprawdzamy czy scroll "przejechał" przez wysokość, na której znajduje się menu.
                        // MUSIMY sprawdzić, czy jest większy, nie da się zrobić porównania if (parseInt($(window).scrollTop()) == menuPositionTop)
                        // ponieważ scroll nie przelatuje po wszystkich wartościach po kolei, tylko "przeskakuje" wartości, tym więcej im szybciej machamy scrollbarem;)

                        if (menu.hasClass('static')) { // ten warunek nie jest konieczny, ale gdy go dodamy unikamy niepotrzebnego usuwania i dodawania klasy. to samo można zrobić za pomocą funkcji .css()
                            menu.removeClass('static').addClass('fixed'); // zmieniamy pozycję ze static na fixed zamieniając klasy
                        }
                    }
                    
                    else {
                        if (menu.hasClass('fixed')) { // podobnie jak warunek powyżej. też nie jest konieczny
                            menu.removeClass('fixed').addClass('static');  // zmieniamy pozycję z fixed na static zamieniając klasy
                        }
                    }
                });
                
            });



Mój plik style.css wygląda tak:

Kod
* {margin:0;padding:0;}
body {padding:10px;}
#top {background: #ccc; height: 200px;}
#menu {background:#111; color: #fff; width: 200px;}
#bottom {background: #ccc; height: 1500px;}
.fixed {position: fixed; top:0; left:10px; opacity: 0.7}
.static {position: static;}



Pliki są zapisane w kodowaniu UTF-8


Dobra, teraz już strona działa

ale wygląda teraz tak:

www.frameart.pl/xxxx/index.html

jak czarny div dochodzi do góry

to raz, że powiększa się i div robi się przeźroczysty i widać tekst
a dwa, że tekst przewija się pod tym powiększonym pojemniku, który wychodzi poza ramki pojemnika bottom, a tekst na nim robi się widzialny

tak nie może być

Czy wie ktoś może co z tym zrobić?


index.html:

Kod
<html>

    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta http-equiv="content-language" content="pl">
        
        
    <link rel="Stylesheet" type="text/css" href="style.css">
        
        
        <!-- <script type="text/javascript" src="ruchomydiv.js"></script> -->
        <script src="jquery-2.1.4.js" type="text/javascript"></script>
    
        
        </head>

    <body>
    <div id="top">top</div>
<div id="menu" class="static">menu</div>
<div id="bottom">bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom </div>
    </body>

        
        <script>
        
        $(function(){
                var menu = $('#menu'); // element zawierający menu
                var menuPositionTop = menu.position().top; // sprawdzamy początkową pozycję menu
                
                $(window).scroll(function () { // przypisujemy funkcję do zdarzenia 'scroll'
                    if(parseInt($(window).scrollTop()) > menuPositionTop) {
                        // sprawdzamy czy scroll "przejechał" przez wysokość, na której znajduje się menu.
                        // MUSIMY sprawdzić, czy jest większy, nie da się zrobić porównania if (parseInt($(window).scrollTop()) == menuPositionTop)
                        // ponieważ scroll nie przelatuje po wszystkich wartościach po kolei, tylko "przeskakuje" wartości, tym więcej im szybciej machamy scrollbarem;)

                        if (menu.hasClass('static')) { // ten warunek nie jest konieczny, ale gdy go dodamy unikamy niepotrzebnego usuwania i dodawania klasy. to samo można zrobić za pomocą funkcji .css()
                            menu.removeClass('static').addClass('fixed'); // zmieniamy pozycję ze static na fixed zamieniając klasy
                        }
                    }
                    
                    else {
                        if (menu.hasClass('fixed')) { // podobnie jak warunek powyżej. też nie jest konieczny
                            menu.removeClass('fixed').addClass('static');  // zmieniamy pozycję z fixed na static zamieniając klasy
                        }
                    }
                });
                
            });
                        
        </script>                
    
        
        
</html>




plik style.css:


Kod
* {margin:0;padding:0;}
body {padding:10px;}
#top {background: #ccc; height: 596px; top}
#menu {background-color:#111; color: #fff; width: 100%; height: 89px;}
#bottom {background: #ccc; height: 1500px;}
.fixed {position: fixed; top:0; left:10px; opacity: 0.7}
.static {position: static;}
Go to the top of the page
+Quote Post
nowicjuszek
post
Post #4





Grupa: Zarejestrowani
Postów: 6
Pomógł: 0
Dołączył: 7.07.2015

Ostrzeżenie: (0%)
-----

Zapomniałem podać Ci jquery_1.7.2.js do pobrania:

http://host1gb.net.pl/download.php?file=b1...bf81ef9db0f3c94

[HTML] pobierz, plaintext 
  1.  <head>
  2.  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  3.  <meta http-equiv="content-language" content="pl">
  4.  
  5. <link rel="Stylesheet" type="text/css" href="css.css">
  6. <script src="jquery-1.7.2.min.js"></script>
  7. <script type="text/javascript" src="ruchomydiv.js"></script>
  8.  
  9.  </head>
  10.  
  11.     <body>
  12.     <div id="top">top</div>
  13. <div id="menu" class="static">menu</div>
  14. <div id="bottom">bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom </div>
  15.     </body>
  16. </html>
[HTML] pobierz, plaintext



Sprawdzone, działa, czyli musisz mieć cztery pliki na serwerze "index.html" "jquery-1.7.2.min.js" "ruchomydiv.js" "css.css".

Co do przezroczystości podczas przewijania, jest odpowiedzialny zapis w css.css
[HTML] pobierz, plaintext 
  1. * {margin:0;padding:0;}
  2. body {padding:10px;}
  3. #top {background: #ccc; height: 200px;}
  4. #menu {background:#111; color: #fff; width: 200px;}
  5. #bottom {background: #ccc; height: 800px;}
  6. .fixed {position: fixed; top:0; left:10px; opacity: 0.7;}
  7. .static {position: static;}
[HTML] pobierz, plaintext


Opcja "opacity" ustawiona na "0.7" czyli menu jest przezroczyste w 70%, usuń ten zapis i przezroczystości nie ma.

Co do powiększania kontenera i wychodzenia poza ramkę, to w css.css
[HTML] pobierz, plaintext 
  1. #menu {background-color:#111; color: #fff; width: 100%; height: 89px;}
[HTML] pobierz, plaintext


Dałeś "menu: width: 100%;", dlatego podczas przewijania zajmuje cały obszar z prawej strony, z lewej nie wychodzi bo jest margines na 10px. Dlatego musisz "width" podać w px.

Ten post edytował nowicjuszek 11.07.2015, 13:38:26
Go to the top of the page
+Quote Post
karteg
post
Post #5





Grupa: Zarejestrowani
Postów: 6
Pomógł: 0
Dołączył: 3.07.2015

Ostrzeżenie: (0%)
-----

udało mi się jeszcze inaczej to przerobić, dzięki pomocy kogoś znajomego ale nie do końca to działa tak, jak powinno
więc poprzedni wątek jest jakby nieaktualny, ale powstał teraz inny problem
jak wejdziecie na:
www.frameart.pl/ok/index.html
to zobaczycie, że czarny pasek z nawigacją przy innym rozmiarze okna/monitora/etc nie zostanie na samym dole ekranu aż do momentu przewijania w dół
inaczej:
chciałbym uzyskać efekt dokładnie taki jak na tej stronce:
http://fensi.pl/
na tej stronce jest właśnie tak, że niezależnie czy będzie się pomniejszać/zwiększać ekran - pasek nawigacyjny z linkami zawsze będzie na dole
nie wiem jak zrobić to, żeby i na mojej www ten pasek był zawsze na dole
poniżej wstawiam kod

plik index.html:

Kod
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-language" content="pl">
<link rel="Stylesheet" type="text/css" href="style.css">
<script src="jquery-2.1.4.js" type="text/javascript"></script>
</head>

<body>

<div id="top">
    DIV NA BANER ALBO SLIDER
</div>
<div id="menu" class="absolute">
    <a href="#p1" class="zaznaczenie">Skocz do paragrafu 1</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="#p2" class="zaznaczenie">Skocz do paragrafu 2</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="#p3" class="zaznaczenie">Skocz do paragrafu 3</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="#p4" class="zaznaczenie">Skocz do paragrafu 4</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="body" class="zaznaczenie">Skocz do początku</a>
</div>

<div id="dol">        
                
        <p id="p1">
            <b>Paragraf 1</b><br />
            paragraf_1 paragraf_1 paragraf_1 paragraf_1 paragraf_1 paragraf_1 paragraf_1 paragraf_1 paragraf_1 paragraf_1 paragraf_1 paragraf_1 paragraf_1   paragraf_1 paragraf_1 paragraf_1 paragraf_1 paragraf_1 paragraf_1 paragraf_1 paragraf_1 paragraf_1 paragraf_1 paragraf_1 paragraf_1 paragraf_1 paragraf_1 paragraf_1 paragraf_1 paragraf_1 paragraf_1 paragraf_1 paragraf_1 paragraf_1 paragraf_1 paragraf_1 paragraf_1 paragraf_1 paragraf_1 paragraf_1 paragraf_1 </p>                        
        <br /><br /><br /><br /><br /><br />
        
        
        <p id="p2">
            <b>Paragraf 2</b><br />
            paragraf_2 paragraf_2 paragraf_2 paragraf_2 paragraf_2 paragraf_2 paragraf_2 paragraf_2 paragraf_2 paragraf_2 paragraf_2 paragraf_2 paragraf_2 paragraf_2 paragraf_2 paragraf_2 paragraf_2 paragraf_2 paragraf_2 paragraf_2 paragraf_2 paragraf_2 paragraf_2 paragraf_2 paragraf_2 paragraf_2 paragraf_2 paragraf_2 paragraf_2 paragraf_2 paragraf_2 paragraf_2 paragraf_2 paragraf_2 paragraf_2 paragraf_2 paragraf_2 paragraf_2 paragraf_2 paragraf_2 paragraf_2         </p>        
        <br /><br /><br /><br /><br /><br />
        
        
        <p id="p3">
            <b>Paragraf 3</b>
            <br />paragraf_3 paragraf_3 paragraf_3 paragraf_3 paragraf_3 paragraf_3 paragraf_3 paragraf_3 paragraf_3 paragraf_3 paragraf_3 paragraf_3 paragraf_3 paragraf_3 paragraf_3 paragraf_3 paragraf_3 paragraf_3 paragraf_3 paragraf_3 paragraf_3 paragraf_3 paragraf_3 paragraf_3 paragraf_3 paragraf_3 paragraf_3 paragraf_3 paragraf_3 paragraf_3 paragraf_3 paragraf_3 paragraf_3 paragraf_3 paragraf_3 paragraf_3 paragraf_3 paragraf_3 paragraf_3 paragraf_3         </p>
      <br /><br /><br /><br /><br /><br />
        
        
        <p id="p4">
            <b>Paragraf 4</b>
            <br />paragraf_4 paragraf_4 paragraf_4 paragraf_4 paragraf_4 paragraf_4 paragraf_4 paragraf_4 paragraf_4 paragraf_4 paragraf_4 paragraf_4 paragraf_4 paragraf_4 paragraf_4 paragraf_4 paragraf_4 paragraf_4 paragraf_4 paragraf_4 paragraf_4 paragraf_4 paragraf_4 paragraf_4 paragraf_4 paragraf_4 paragraf_4 paragraf_4 paragraf_4 paragraf_4 paragraf_4 paragraf_4 paragraf_4 paragraf_4 paragraf_4 paragraf_4 paragraf_4 paragraf_4 paragraf_4 paragraf_4         </p>
        <br /><br /><br /><br /><br /><br />        

</div>
</body>

<script>
        
        $(function(){
                var menu = $('#menu'); // element zawierający menu
                var menuPositionTop = menu.position().top; // sprawdzamy początkową pozycję menu
                
                $(window).scroll(function () { // przypisujemy funkcję do zdarzenia 'scroll'
                    if(parseInt($(window).scrollTop()) >= menuPositionTop) {
                        // sprawdzamy czy scroll "przejechał" przez wysokość, na której znajduje się menu.
                        // MUSIMY sprawdzić, czy jest większy, nie da się zrobić porównania if (parseInt($(window).scrollTop()) == menuPositionTop)
                        // ponieważ scroll nie przelatuje po wszystkich wartościach po kolei, tylko "przeskakuje" wartości, tym więcej im szybciej machamy scrollbarem;)

                        if (menu.hasClass('absolute')) { // ten warunek nie jest konieczny, ale gdy go dodamy unikamy niepotrzebnego usuwania i dodawania klasy. to samo można zrobić za pomocą funkcji .css()
                            menu.removeClass('absolute').addClass('fixed'); // zmieniamy pozycję ze static na fixed zamieniając klasy
                        }
                    }
                    
                    else {
                        if (menu.hasClass('fixed')) { // podobnie jak warunek powyżej. też nie jest konieczny
                            menu.removeClass('fixed').addClass('absolute');  // zmieniamy pozycję z fixed na static zamieniając klasy
                        }
                    }
                });
                
            });
            
    
    $(document).ready(function() {
        $('.zaznaczenie').click(function(){

        pozycja = $($(this).attr('href')).position().top;
        if($('#menu').hasClass('fixed')) {
            pozycja -= 89;
        }
        else {
            pozycja -= 89;
        }

$('html, body').animate({scrollTop:pozycja}, 'slow');
return false;
});
});
    
            
</script>                
        
        
</html>



plik style.css:

Kod
* {margin:0;padding:0;}
body {padding: }
#top {background: red; height: 578px;}
#menu {background-color:#111; color: #fff; width: 100%; min-height: 89px;}
#dol {background: #ccc; height: 3500px; padding-top:89px;}
.fixed {position: fixed; top:0;}
.absolute {position: absolute;}


z góry dzięki za pomoc
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 20.08.2025 - 16:52
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn