Tworzę stronę internetową, której cała treść znajduje się na jednej stronie tzw. "one page website". Posiadam affixa na samej górze strony oraz navbara który zjeżdża sobie wraz ze scrollowaniem strony. Mój problem polega na tym iż, po zastosowaniu odsyłaczy do etykiet, przeglądarka przekierowuje użytkownika NIE zawsze w to samo miejsce(#kotwica), a dokładniej w 2 różne miejsca czyli:
- Zaraz po załadowaniu strony klikam w przycisk-> TESTUJ KOTWICE i przegladarka przenosi mnie w niewłasciwe miejsce zaslaniajac treść.
- Jeśli po załadowaniu strony troche zescrolluje myszka w dol i nastepnie klikne w przycisk -> Testuj Kotwice, przegladarka przekierowuje mnie juz we wlasciwe miejsce i tresc nie jest juz zaslonieta.
Doszedłem do wniosku, że jest to spowodowane dokładnie poleceniem data-offset-top="197". Po skasowaniu tego fragmentu kodu, odsylacze dzialaja jak nalezy, jednak jak wiadomo moj navbar pozbawiony jest offsetu, a tego nie chce.
Zależy mi na tym, aby Odsyłacz do etykiety przekierowywał mnie ZAWSZE w to samo miejsce. Czy jest jakis sposob na ominiecie tego problemu? Ponizej zamieszczam kod pokazujacy sama istote problemu.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
/* Note: Try to remove the following lines to see the effect of CSS positioning */
.affix {
top: 0;
width: 100%;
}
.affix + .container-fluid {
padding-top: 70px;
}
</style>
</head>
<body>
<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
<h1>Bootstrap Affix Example</h1>
<h3>Fixed (sticky) navbar on scroll</h3>
<p>Scroll this page to see how the navbar behaves with data-spy="affix".</p>
<p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels.</p>
</div>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197" style="margin: 0;">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Basic Topnav</a></li>
<li><a href="#kotwica">TESTUJ KOTWICE</a></li>
<li><a href="#">Page</a></li>
<li><a href="#">Page</a></li>
</ul>
</nav>
<div class="container-fluid" style="height:1000px; background-color:yellow; ">
<h1>1. Some text to enable scrolling</h1>
<h1>2. Some text to enable scrolling</h1>
<h1>3. Some text to enable scrolling</h1>
<h1>4. Some text to enable scrolling</h1>
<h1>5. Some text to enable scrolling</h1>
<h1>6. Some text to enable scrolling</h1>
<h1>7. Some text to enable scrolling</h1>
<h1>8. Some text to enable scrolling</h1>
<h1>9. Some text to enable scrolling</h1>
<h1>10. Some text to enable scrolling</h1>
</div>
<div class="container-fluid" id="kotwica" style="height:1000px; padding-top: 50px; background-color:orange;">
<h1>1. Some text to enable scrolling</h1>
<h1>2. Some text to enable scrolling</h1>
<h1>3. Some text to enable scrolling</h1>
<h1>4. Some text to enable scrolling</h1>
<h1>5. Some text to enable scrolling</h1>
<h1>6. Some text to enable scrolling</h1>
<h1>7. Some text to enable scrolling</h1>
<h1>8. Some text to enable scrolling</h1>
<h1>9. Some text to enable scrolling</h1>
<h1>10. Some text to enable scrolling</h1>
</div>
</body>
</html>