Ik probeer een site te maken waarbij tijdens het naar beneden scrollen de font kleur van de navigatie veranderd zodat deze op alle achtergronden goed leesbaar is. De HTML is:
IK ben niet echt bekend met jQuery, maar wat ik gebruik ziet er als volgt uit:
Op zich werkt dit, totdat de link wordt gebruikt om naar een andere pagina te gaan en terugkeer naar deze pagina of totdat ik b.v. halverwege de pagina refresh. Dan wordt dat punt als nul gebruikt en worden de kleurwijzigingen van de letters op het verkeerde moment doorgevoerd.
Kan iemand mij vertellen wat ik kan veranderen zodat wanneer ik, nadat ik terugkeer naar deze pagina of wanneer ik de pagina opnieuw laadt (waar ik me ook bevind op de pagina) altijd de top van de pagina als waypoint nul wordt genomen en is er het script dat ik gebruik samen te voegen (ik gebruik nu 5 keer <script></script>, kan ik alles ook tot 1 samenvoegen).
Dank
HTML:
<nav class="navigation">
<div id="logo">Demo Page</div>
<label for="drop" class="toggle menu-item">Menu</label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li><a href="#1" class="cmn-t-underline">Home</a></li>
<li>
<!-- First Tier Drop Down -->
<label for="drop-1" class="toggle lessen">De lessen +</label>
<a href="#2" class="cmn-t-underline">Lessen</a>
<input type="checkbox" id="drop-1"/>
<ul>
<li><a href="#7" class="cmn-t-underline">Piano</a></li>
<li><a href="#6" class="cmn-t-underline">Keyboard</a></li>
<li><a href="#4" class="cmn-t-underline">Hammond orgel</a></li>
<li><a href="#5" class="cmn-t-underline">Klavecimbel</a></li>
<li><a href="#3" class="cmn-t-underline">Dirigeren</a></li>
</ul>
</li>
<li><a href="#8" class="cmn-t-underline">Over ons</a></li>
<li><a href="#9" class="cmn-t-underline">Meer muziek</a></li>
<li><a href="#10" class="cmn-t-underline">Contact</a></li>
</ul>
</nav>IK ben niet echt bekend met jQuery, maar wat ik gebruik ziet er als volgt uit:
Code:
<script>
var $navigation = $(".navigation");
$navigation.waypoint(function(direction) {
if (direction == 'down') {
$("nav a, nav ul li ul li a, cmn-t-underline").css("color", "#505050");
} else {
$("nav a, nav ul li ul li a, cmn-t-underline").css("color", "#FFFFFF");
}
}, { offset: '-104%' });
</script>
<script>
var $navigation = $(".navigation");
$navigation.waypoint(function(direction) {
if (direction == 'down') {
$("nav a, nav ul li ul li a, cmn-t-underline").css("color", "#FFFFFF");
} else {
$("nav a, nav ul li ul li a, cmn-t-underline").css("color", "#505050");
}
}, { offset: '-268%' });
</script>
<script>
var $navigation = $(".navigation");
$navigation.waypoint(function(direction) {
if (direction == 'down') {
$("nav a, nav ul li ul li a, cmn-t-underline").css("color", "#505050");
} else {
$("nav a, nav ul li ul li a, cmn-t-underline").css("color", "#FFFFFF");
}
}, { offset: '-878%' });
</script>
<script>
var $navigation = $(".navigation");
$navigation.waypoint(function(direction) {
if (direction == 'down') {
$("nav a, nav ul li ul li a, cmn-t-underline").css("color", "#FFFFFF");
} else {
$("nav a, nav ul li ul li a, cmn-t-underline").css("color", "#505050");
}
}, { offset: '-1046%' });
</script>
<script>
var $navigation = $(".navigation");
$navigation.waypoint(function(direction) {
if (direction == 'down') {
$("nav a, nav ul li ul li a, cmn-t-underline").css("color", "#505050");
} else {
$("nav a, nav ul li ul li a, cmn-t-underline").css("color", "#FFFFFF");
}
}, { offset: '-1116%' });
</script>Op zich werkt dit, totdat de link wordt gebruikt om naar een andere pagina te gaan en terugkeer naar deze pagina of totdat ik b.v. halverwege de pagina refresh. Dan wordt dat punt als nul gebruikt en worden de kleurwijzigingen van de letters op het verkeerde moment doorgevoerd.
Kan iemand mij vertellen wat ik kan veranderen zodat wanneer ik, nadat ik terugkeer naar deze pagina of wanneer ik de pagina opnieuw laadt (waar ik me ook bevind op de pagina) altijd de top van de pagina als waypoint nul wordt genomen en is er het script dat ik gebruik samen te voegen (ik gebruik nu 5 keer <script></script>, kan ik alles ook tot 1 samenvoegen).
Dank
