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>
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>
<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