 [JavaScript]Problem z divem, który ma być na stałe podczas scrollowania |
| [JavaScript]Problem z divem, który ma być na stałe podczas scrollowania |
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 |
 |
 
|
 |
|
Post
#2
|
|
|
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;} |
|
|
|
karteg [JavaScript]Problem z divem, który ma być na stałe podczas scrollowania 11.07.2015, 09:16:09 
nowicjuszek w sekcji head zamieszczasz:
[HTML] pobierz, plaint... 11.07.2015, 10:51:52 nowicjuszek Zapomniałem podać Ci jquery_1.7.2.js do pobrania:
... 11.07.2015, 13:05:01 
karteg udało mi się jeszcze inaczej to przerobić, dzięki ... 12.07.2015, 04:06:10  |
|
Aktualny czas: 13.10.2025 - 23:32 |
