Code
[code][/code]Hallo Liebe Community,
ich hab eine Frage bezüglich meiner Onepage und Aktiven Navigation in Joomla.
Ich möchte gerne, das wenn man auf die Navigation klickt, der Aktive Menüpunkt
in der Navigation hervorgehoben wird. Das tut er auch. Mein Problem ist jetzt folgendes:
Wenn ich auf meinen Menüpunkt in der Navigation klicke, ändert er auch den aktiven Menüpunkt.
Aber wenn ich dann nicht klicke, sondern scrolle, dann ändert er nicht auf den nächsten aktiven Menüpunkt
sondern bleibt einfach darauf stehen wo ich hingeklickt habe.
Ich hab folgenden code in der index.php:
Code
<nav id="navigation"> <jdoc:include type="modules" name="menu" style="xhtml" /> </nav><!--/navigation-->und diesen js:
Code
$(document).ready(function () {
$(document).on("scroll", onScroll);
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('li').each(function () {
$(this).removeClass('active');
})
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('#navigation li').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('#navigation ul li').removeClass("active");
currLink.addClass("active");
}
else{
currLink.removeClass("active");
}
});
}im css habe ich dann noch meine classe .active gestylt.
Ich hoffe mir kann jemand helfen.
Viele Grüße,
Janine
