Je ziet het wel meer op andere websites. De navigatiebalk krijgt een ander uitzicht als je naar beneden "scrollt" op de pagina. Meestal gebruiken webmasters hiervoor de "scrollspy"-plugin van Bootstrap. Maar het kan korter, eenvoudiger en vooral met meer functionaliteit. Daarom de SchoolvoorbeeldScroll-plugin.
Bekijk een werkend voorbeeld: https://www.schoolvoorbeeld.be/websites/plugins/slideto.php
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
Plak deze link onder die van jQuery, allebei in de <head>-sectie van de pagina waarin je het effect wil bereiken.
<script src="https://www.schoolvoorbeeld.be/js/jslibnew.js?v7"></script>
Een link gaat standaard naar een andere webpagina. Als je de onderstaande link zou opnemen in je HTML, en een gebruiker klikt erop, dan komt hij/zij terecht op de pagina "contact.html".
<a href="contact.html">Contact</a>
In geval van een "one-page-design" wil je niet naar een andere pagina springen, maar naar een onderdeel van dezelfde pagina. Dat kan eveneens met HTML, we spreken dan van "interne links" of "ankers".
<a href="#contact">Contact</a>
Voorwaarde is wel dat er elders in je document een "lege" link is opgenomen met als naam "contact":
<a name="contact"></a>
Je zal merken dat de "referentie"link een "#" bevat, maar de "name" niet. Als je op de eerste link (met href="#contact") klikt, dan springt de webpagina naar de tweede link (met name="contact").
Het zou natuurlijk veel "chiquer" zijn indien de pagina netjes zou doorschuiven tot op dat punt... Hiervoor hebben we javascript nodig.
Vergeet nu niet stap 1 en 2 te voltooien, of het onderstaande voorbeeld zal niet functioneren!
Het hangt er opnieuw van af wat je precies wil bereiken. Als al je links intern moeten zijn, dan kan je het volgende script toevoegen onderaan je webpagina:
<script>
$(document).ready(function(){
$("a").slideto();
});
</script>
... en klaar is kees...
Het zou ook kunnen dat je enkel bepaalde links "intern" wil maken. Dan geef je die links een "class", bijvoorbeeld "intern".
<a href="#contact" class="intern">Contact</a>
<a href="#info" class="intern">Info</a>
Vervolgens pas je het script aan:
<script>
$(document).ready(function(){
$(".intern").slideto();
});
</script>
De plugin bied nog een aantal opties:
| Optie | Doel | Waarde | Standaard |
speed | De snelheid van het schuiven bepalen met een vaste waarde of in milliseconden | "slow", "fast", 1000, 2000, 3000... | "slow" |
slide | De waarde "swing" zorgt ervoor dat er een versnelling en vertraging gebeurt bij het "sliden". | "linear", "swing" | "linear" |
top | Standaard stopt het schuiven als het bestemmingselement de bovenrand van het browservenster bereikt. Je kan daar een aantal pixels aan toevoegen. | 100, 200, 10, 50... | 0 |
command | Je kan op het einde van het "sliden" een aantal javascript-commando's uitvoeren. Het is ook mogelijk om hier opnieuw informatie op te vragen nl. het element waar op werd geklikt én het referentieadres. | function(object){ | (niets) |
<script>
$(document).ready(function(){
$(".intern").slideto({
speed: 3000,
slide: "swing",
top: 50,
command: function(object){
//doe hier wat je wil
}
});
});
</script>