{"id":253450,"date":"2023-01-02T14:57:00","date_gmt":"2023-01-02T11:57:00","guid":{"rendered":"https:\/\/inform.click\/aendern-des-aktiven-menuepunkts-beim-scrollen-der-seite-mit-jquery\/"},"modified":"2023-01-02T15:06:00","modified_gmt":"2023-01-02T12:06:00","slug":"aendern-des-aktiven-menuepunkts-beim-scrollen-der-seite-mit-jquery","status":"publish","type":"post","link":"https:\/\/inform.click\/de\/aendern-des-aktiven-menuepunkts-beim-scrollen-der-seite-mit-jquery\/","title":{"rendered":"\u00c4ndern des aktiven Men\u00fcpunkts beim Scrollen der Seite mit jQuery"},"content":{"rendered":"<p>\n  In diesem Tutorial erfahren Sie, wie Sie das aktive Men\u00fcelement beim Scrollen der Seite \u00e4ndern, ohne spezielle JS-Dateien oder Plug-Ins zu verwenden.\n<\/p>\n<p>\n  In dieser Demo verwenden wir einfache jQuery-Funktionen, um unser Ziel zu erreichen.\n<\/p>\n<h5>\n  Erwartete Ausgabe:<br \/>\n<\/h5>\n<p>\n  Beim Seitenscroll-Ereignis wird der ausgew\u00e4hlte (aktive) Men\u00fcpunkt entsprechend dem aktuell angezeigten Abschnitt ge\u00e4ndert. Dies geschieht auch, wenn der Benutzer auf einen der Men\u00fcelement-Links klickt. Diese Art der Implementierung eignet sich gut f\u00fcr Single-Page-Websites mit fester Men\u00fcleiste. Lass uns anfangen.\n<\/p>\n<p>\n  <a href=\"http:\/\/www.instantshift.com\/demo\/jquery-active-menu\" target=\"_blank\" rel=\"noopener\">Live-Demo<\/a>\n<\/p>\n<p>\n  Erster Schritt: Erstellen des Markups\n<\/p>\n<p>\n  Das Markup ist sehr einfach und leicht. Wir werden eine einfache Navigationsleiste mit wenigen Men\u00fcpunkten erstellen, wie wir sie auf www.instantshift.com haben. Es enth\u00e4lt einige Elemente wie Startseite, Webdesign, CSS, Tools, Tutorials usw. Die Seite enth\u00e4lt verschiedene Textinhaltsbl\u00f6cke. So sieht das Markup aus.\n<\/p>\n<div id=\"maindiv\">\n  <code>\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<div class=\"container clear\">\n    <code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<div id=\"sidebar\">\n      <code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<div id=\"checkdiv\"><\/div>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<nav class=\"\">\n        <code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<ul>\n          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/p>\n<li>\n            <code>&lt;a href=\"https:\/\/inform.click#home\" class=\"active\"&gt;Home&lt;\/a&gt;<\/code>\n          <\/li>\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/p>\n<li>\n            <code>&lt;a href=\"https:\/\/inform.click#webdesign\"&gt;Web Design&lt;\/a&gt;<\/code>\n          <\/li>\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/p>\n<li>\n            <code>&lt;a href=\"https:\/\/inform.click#css\"&gt;CSS&lt;\/a&gt;<\/code>\n          <\/li>\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/p>\n<li>\n            <code>&lt;a href=\"https:\/\/inform.click#tools\"&gt;Tools&lt;\/a&gt;<\/code>\n          <\/li>\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/p>\n<li>\n            <code>&lt;a href=\"https:\/\/inform.click#tutorials\"&gt;Tutorials&lt;\/a&gt;<\/code>\n          <\/li>\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n        <\/ul>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><br \/>\n      <\/nav>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>\n    <\/div>\n<p><!-- sidebar div end --><br \/>\n    <code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<div id=\"content\">\n      <code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<section id=\"home\">\n        <code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<h1>\n          <code>Home<\/code><br \/>\n        <\/h1>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<p>\n          <code>&lt;!-- Home Content Goes Here --&gt;<\/code>\n        <\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><br \/>\n      <\/section>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<section id=\"webdesign\">\n        <code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<h1>\n          <code>Web Design<\/code><br \/>\n        <\/h1>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<p>\n          <code>&lt;!-- Web Design Content Goes Here --&gt;<\/code>\n        <\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><br \/>\n      <\/section>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<section id=\"css\">\n        <code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<h1>\n          <code>CSS<\/code><br \/>\n        <\/h1>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<p>\n          <code>&lt;!-- CSS Content Goes Here --&gt;<\/code>\n        <\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><br \/>\n      <\/section>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<section id=\"tools\">\n        <code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<h1>\n          <code>Tools<\/code><br \/>\n        <\/h1>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<p>\n          <code>&lt;!-- Tools Content Goes Here --&gt;<\/code>\n        <\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><br \/>\n      <\/section>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<section id=\"tutorials\">\n        <code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<h1>\n          <code>Tutorials<\/code><br \/>\n        <\/h1>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<p>\n          <code>&lt;!-- Tutorials Content Goes Here --&gt;<\/code>\n        <\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><br \/>\n      <\/section>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>\n    <\/div>\n<p><!-- contain div end --><br \/>\n    <code>\u00a0\u00a0\u00a0\u00a0<\/code>\n  <\/div>\n<p><!-- container div end -->\n<\/div>\n<pre><!-- maindiv end --><\/pre>\n<p>\n  <code>Unser HTML-Markup ist fertig, jetzt ist es an der Zeit, etwas CSS-Stil hinzuzuf\u00fcgen.<\/code>\n<\/p>\n<h3>\n  <code>Schritt Zwei: Hinzuf\u00fcgen von CSS-Klassen.<\/code><br \/>\n<\/h3>\n<pre><code>&lt;code&gt;body{\n      background-color:#520000;font-size:17px;\n}\n \n#maindiv{\n      background:#F4F3E8 url(images\/page_bg.webp);\n}\n \n#title h1 {\n     text-align: right;font-weight: bold;font-size: 25px;margin: 0;color:#fff;\n}\n \n.container {\n     width: 1000px;margin: 0 auto;padding: 38px 0;\n}\n \n#wrapper{\n     margin:0px auto;\n}\n \n#sidebar {\n    width:250px;float:left;\n}\n \n#content {\n   width:720px;float:right;padding-left:12px;\n}\n \n#title {\n   width: 900px;height: 60px;float: right;\n}\n \n.clear:after {\n   visibility: hidden;display: block;content: \"\";clear: both;height: 0;\n}\n \nnav {\n  width:213px;background-color:#030000;border: 2px solid #4F4D4D;padding:0 12px;\n}\n \nnav.stickydiv {\n   position: fixed;top: 0;z-index: 10000;margin-top:12px;\n}\n \nnav ul {\nlist-style-type:none;margin:0;padding:0;\n}\n \nnav li {\npadding:5px 10px;\n}\n \nnav li a {\ncolor:#fff;font-weight:700;line-height: 25px;\n}\n \na{\ntext-decoration:none;\n}\n \n.active {\ncolor: #F99;text-decoration: none;\n}\n \np{\nfont-family:Verdana,Arial,Helvetica,sans-serif;\n}\n \nfooter p{\n  color:#fff;\n}<\/code><\/code><\/pre>\n<h3>\n  Schritt drei: \u00dcberpr\u00fcfung des Spielplatzes \u201ejQuery&#8220;.<br \/>\n<\/h3>\n<p>\n  Zun\u00e4chst stellen wir sicher, dass beim Klicken auf die Men\u00fclinks das entsprechende Div nach oben gescrollt werden sollte. Wie Sie im folgenden Code sehen k\u00f6nnen, entfernen wir beim Klicken auf den Men\u00fcelement-Link die \u201eaktive&#8220; Klasse des aktuell ausgew\u00e4hlten Men\u00fcelements und f\u00fcgen die aktive Klasse dem angeklickten Element-Link hinzu.\n<\/p>\n<p>\n  Dann erhalten wir die ID des angeklickten Elements. this.hash gibt \u201e#foo&#8220; zur\u00fcck, was der ID-Selektor ist. Daher ist $(this.hash) dasselbe wie $(&#8222;#foo&#8220;) und es wird das Element mit der ID foo ausw\u00e4hlen.\n<\/p>\n<pre><code>$('a[href^=\"#\"]').on('click', function (e) {\n        e.preventDefault();\n        $(document).off(\"scroll\");\n         \n        $('a').each(function() {\n            $(this).removeClass('active');\n        })\n        $(this).addClass('active');\n         var target = this.hash,\n         menu = target;\n        $target = $(target);\n               \n       $('html, body').stop().animate({\n            'scrollTop': $target.offset().top+2\n        }, 600, 'swing', function() {\n            window.location.hash = target;\n            $(document).on(\"scroll\", onScroll);\n        });\n    });<\/code><\/pre>\n<p>\n  Beim Scroll-Ereignis pr\u00fcfen wir die Position der Elemente anhand des Scrollbetrags sowie der Summe ihrer H\u00f6he und Position. Auf dieser Grundlage f\u00fcgen wir die aktive Klasse der Men\u00fcpunkte hinzu und entfernen sie.\n<\/p>\n<pre><code>function onScroll(event){\n    var scrollPos = $(document).scrollTop();\n    $('#sidebar a').each(function () {\n        var currLink = $(this);\n        var refElement = $(currLink.attr(\"href\"));\n        if (refElement.position().top  scrollPos) {\n            $('#sidebar ul li a').removeClass(\"active\");\n            currLink.addClass(\"active\");\n        }\n        else{\n            currLink.removeClass(\"active\");\n        }\n    });\n}<\/code><\/pre>\n<p>\n  und zuletzt beim Scrollen der Seite pr\u00fcfen wir, ob die Seitenleiste klebrig ist oder nicht.\n<\/p>\n<pre><code>$(window).scroll(function(){\n        \/\/ the \"12\" should equal the margin-top value for nav.stickydiv\n        var window_top = $(window).scrollTop() + 12;\n        var div_top = $('#checkdiv').offset().top;\n            if (window_top &gt;= div_top) {\n                $('nav').addClass('stickydiv');\n            } else {\n                $('nav').removeClass('stickydiv');\n            }\n });<\/code><\/pre>\n<p>\n  Hier ist das vollst\u00e4ndige Skript.\n<\/p>\n<pre><code>\n&lt;script src=\"\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.1\/jquery.min.js\"&gt;&lt;\/script&gt;\n&lt;script type=\"text\/javascript\"&gt;\n\/\/&lt;![CDATA[\n\n$(document).ready(function () {\n$(window).scroll(function(){\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var window_top = $(window).scrollTop() + 12;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ the \"12\" should equal the margin-top value for nav.stickydiv\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var div_top = $('#checkdiv').offset().top;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (window_top &gt;= div_top) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('nav').addClass('stickydiv');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} else {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('nav').removeClass('stickydiv');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0});\u00a0\n\u00a0\n\u00a0\u00a0$(document).on(\"scroll\", onScroll);\n\u00a0\n$('a[href^=\"#\"]').on('click', function (e) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0e.preventDefault();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$(document).off(\"scroll\");\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('a').each(function () {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$(this).removeClass('active');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0})\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$(this).addClass('active');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var target = this.hash,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0menu = target;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$target = $(target);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('html, body').stop().animate({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'scrollTop': $target.offset().top+2\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}, 600, 'swing', function () {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0window.location.hash = target;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$(document).on(\"scroll\", onScroll);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0});\n});\n\u00a0\nfunction onScroll(event){\n\u00a0\u00a0\u00a0\u00a0var scrollPos = $(document).scrollTop();\n\u00a0\u00a0\u00a0\u00a0$('#sidebar a').each(function () {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var currLink = $(this);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var refElement = $(currLink.attr(\"href\"));\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (refElement.position().top &lt;= scrollPos && refElement.position().top + refElement.height() &gt; scrollPos) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('#sidebar ul li a').removeClass(\"active\");\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0currLink.addClass(\"active\");\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0else{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0currLink.removeClass(\"active\");\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0});\n}\n\/\/]]&gt;\n&lt;\/script&gt;<\/code><\/pre>\n<p>\n  Das ist es, es ist einfach richtig? Genie\u00dfen! Vergessen Sie nicht, sich die Demo anzusehen.\n<\/p>\n<h4>\n  Live-Demo und Quellcode<br \/>\n<\/h4>\n<p>\n  Hier sehen Sie dieses Aktionsmen\u00fc in Live-Aktion. Au\u00dferdem k\u00f6nnen Sie die Quelldateien herunterladen, damit Sie sie bearbeiten und direkt verwenden k\u00f6nnen, was immer Sie m\u00f6chten.\n<\/p>\n<p>\n  <a href=\"http:\/\/www.instantshift.com\/demo\/jquery-active-menu\" target=\"_blank\" rel=\"noopener\">Live-Demo<\/a> &nbsp;<a href=\"http:\/\/www.instantshift.com\/assets\/downloads\/2014\/jquery-active-menu.zip\" target=\"_blank\" rel=\"noopener\">Quellcode herunterladen<\/a>\n<\/p>\n<\/p>\n<div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\n  Aufnahmequelle: <a target=\"_blank\" rel=\"noopener nofollow\" data-pssr=\"\" href=\"http:\/\/www.instantshift.com\/2014\/11\/14\/jquery-page-scroll-active-menu\/\">instantshift.com<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>In diesem Tutorial erfahren Sie, wie Sie das aktive Men\u00fcelement beim Scrollen der Seite \u00e4ndern, ohne spezielle JS-Dateien oder Plug-Ins zu verwenden. In dieser Demo verwenden wir einfache jQuery-Funktionen, um unser Ziel zu erreichen. Erwartete Ausgabe: Beim Seiten-Scroll-Ereignis wird das ausgew\u00e4hlte (aktive) Men\u00fcelement entsprechend dem aktuell angezeigten Abschnitt ge\u00e4ndert. Dies geschieht auch, wenn der Benutzer auf einen der Men\u00fcelement-Links klickt. Diese Art der Implementierung eignet sich gut f\u00fcr Single-Page-Websites mit fester Men\u00fcleiste. Lass uns anfangen. Erster Schritt: Erstellen des Markups Das Markup ist sehr einfach und leicht. Wir \u2026<\/p>\n","protected":false},"author":1,"featured_media":221850,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[224,55,146,120],"tags":[],"class_list":["post-253450","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-lehrbuecher","category-web-und-wordpress","category-web-tipps-und-tricks","category-web-tools"],"_links":{"self":[{"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/posts\/253450","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/comments?post=253450"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/posts\/253450\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/media\/221850"}],"wp:attachment":[{"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/media?parent=253450"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/categories?post=253450"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/tags?post=253450"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}