Oliver77
Mitglied
Onepager
Hallo, hier möchte ich ein Script vorstellen, um einen Effekt einzusetzen bei dem die Menüpunkte beim Scrollen hervorgehoben werden.
Für Wordpress empfehle ich das Plugin Custom CSS & JS.
Dort das Script im Footer integrieren.
Das HTML:
Dann ID's vergeben:
Wordpress
jQuery
CSS
Eine Demo gibt es hier:
https://mg-otterson.de/fileadmin/scroll-mark/
Beispiel auf Codepen:
https://codepen.io/Oliver7777/pen/MWROYPY
Hallo, hier möchte ich ein Script vorstellen, um einen Effekt einzusetzen bei dem die Menüpunkte beim Scrollen hervorgehoben werden.
Für Wordpress empfehle ich das Plugin Custom CSS & JS.
Dort das Script im Footer integrieren.
Das HTML:
HTML:
<li class="menu-item"><a href="#">Seite 1</a></li> erstes Element
<li class="menu-item"><a href="#section-2">Seite 2</a></li>
<li class="menu-item"><a href="#section-3">Seite 3</a></li>
HTML:
<h2 id="section-2">Seite 2</h2>
Wordpress
HTML:
Individueller Link:
https://meine-seite.de/#mein-anker
HTML:
Individueller Link Startseite:
https://meine-seite.de/#
jQuery
Javascript:
const primaryMenu = "#site-navigation .menu-item a[href*='#']";
// Die Anker-Selektoren
const menuItem = "#site-navigation .menu-item";
// Die Listelemente der Navigation
const nav = "#site-navigation";
// Der übergeordnete Selektor, hier das Ul
const mobileNav = "nav";
//mobil Navigations-Container
const marginTop = 0;
// Offset-Abstand
const mobileMarginTop = 0;
// Offset-Abstand mobil
const speed = 600;
// Scrollgeschwindigkeit
const mobile = 630;
// Breite der Mobilanisicht
Javascript:
(function ($) {
const primaryMenu = "#site-navigation .menu-item a[href*='#']";
const menuItem = "#site-navigation .menu-item";
const nav = "#site-navigation";
const mobileNav = "nav";
const marginTop = 0;
const mobileMarginTop = 0;
const speed = 600;
const mobile = 630;
var lastId;
var posArray = [];
var eventFlag = true;
var lastIndex;
var indexCount = 0;
var navHeight;
if ($(window).outerWidth() > mobile && $(document).scrollTop() == 0) {
$(menuItem + ":first-child").addClass("scrollact");
}
$(primaryMenu).click(function (event) {
let actMarginTop;
if ($(window).width() < mobile) {
actMarginTop = mobileMarginTop;
navHeight = $(mobileNav).outerHeight();
}
else {
actMarginTop = marginTop;
navHeight = $(nav).outerHeight();
}
event.preventDefault();
var id = $(this).prop("hash");
if (id == "") {
$('html, body').animate({scrollTop: ((0))}, speed);
} else if ($(id).length) {
$('html, body').animate({scrollTop: (($(id).offset().top - navHeight - actMarginTop))}, speed);
}
});
setTimeout(function () {
pos();
}, 200);
$(window).scroll(function () {
if ($(window).width() > mobile) {
var scrollPos = $(document).scrollTop();
$.each(posArray, function (index, value) {
if (scrollPos > value - 1) {
indexCount = index;
if (lastIndex < index) {
eventFlag = true;
}
}
if (scrollPos < value + 1) {
if (lastIndex == index) {
eventFlag = true;
}
}
});
$.each(posArray, function (index, value) {
if (scrollPos > value - 1 && eventFlag) {
if (index == indexCount) {
lastIndex = index;
eventFlag = false;
$(menuItem).removeClass("scrollact");
$(menuItem).eq(index).addClass("scrollact");
}
}
});
if (scrollPos > $(document).height() - 1 - $(window).height()) {
$(menuItem).removeClass("scrollact");
$(primaryMenu).eq(lastId).parent("li").addClass("scrollact");
eventFlag = true;
}
}
});
function pos() {
posArray = [];
navHeight = $(nav).outerHeight();
$(primaryMenu).each(function (index) {
var id = $(this).prop("hash");
if (id == "") {
posArray.push(0);
} else if ($(id).length) {
posArray.push($(id).offset().top - navHeight - marginTop);
lastId = index;
}
});
}
$(window).resize(function () {
if ($(window).outerWidth() > mobile) {
pos();
} else {
$(menuItem).removeClass("scrollact");
}
});
})(jQuery);
CSS:
.scrollact {
background:#f00;
}
Eine Demo gibt es hier:
https://mg-otterson.de/fileadmin/scroll-mark/
Beispiel auf Codepen:
https://codepen.io/Oliver7777/pen/MWROYPY