bomsn · February 11, 2021 16:06
diff --git a/highlight-active-links-on-scroll.html b/highlight-active-links-on-scroll.html
 <!DOCTYPE html>
 <html>
 <title>Highlight Active Link</title>

 <body>
    <!-- Styles -->
    <style>
        .nav-container {
            position: fixed;
            left: 0;
            top: 0px;
            background: #000;
            display: block;
            width: 100%;
            height: 30px;
            padding: 10px 30px;
            color: #fff;
            z-index: 9;
        }

        .nav {
            margin: 0px;
        }

        .nav a {
            border-radius: 50px;
            display: inline-block;
            margin: 0px 5px;
            transition: background .25s ease-out;
            padding: 5px 10px;
            text-decoration: none;
            color: #fff;
            font-weight: 600;
            letter-spacing: 1px;
            font-family: monospace;
            opacity: 0.8;
        }

        .nav a:hover {
            opacity: 1;
        }

        .nav a.active {
            opacity: 1;
            background: red;
        }

        #content {
            padding-top: 60px;
        }

        #content>div {
            margin-bottom: 30px;
        }

        #content>div#section_5 {
            margin-bottom: 600px;
        }
    </style>

    <!-- Menu -->
    <div class="nav-container">
        <div class="nav">
            <a href="#section_1">Features</a>
            <a href="#section_2">Why Us</a>
            <a href="#section_3">About Us</a>
            <a href="#section_4">Team</a>
            <a href="#section_5">Contact</a>
        </div>
    </div>
    <!-- Content -->
    <div id="content">
        <div id="section_1">
            <h2>Features</h2>

            <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis
                egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
                sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo.
                Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
                <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum,
                eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis
                pulvinar facilisis. Ut felis.
            </p>

            <h2>Header Level 2</h2>

            <ol>
                <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                <li>Aliquam tincidunt mauris eu risus.</li>
            </ol>

            <blockquote>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet
                    congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis
                    mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare
                    est.</p>
            </blockquote>

            <h3>Header Level 3</h3>

            <ul>
                <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                <li>Aliquam tincidunt mauris eu risus.</li>
            </ul>

            <pre><code>
            #header h1 a {
              display: block;
              width: 300px;
              height: 80px;
            }
            </code></pre>
        </div>
        <div id="section_2">
            <h2>Why Us</h2>
            <ul>
                <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in,
                    diam. Sed arcu. Cras consequat.</li>
                <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu
                    erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus,
                    metus.</li>
                <li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem
                    tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li>
                <li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum
                    vulputate, nunc.</li>
            </ul>

        </div>
        <div id="section_3">
            <h2>About Us</h2>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
                tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
                semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien
                ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.
                Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac
                dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus,
                tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi,
                tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
        </div>
        <div id="section_4">
            <h2>Team</h2>
            <dl>
                <dt>Definition list</dt>
                <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                    commodo consequat.</dd>
                <dt>Lorem ipsum dolor sit amet</dt>
                <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                    commodo consequat.</dd>
            </dl>
        </div>
        <div id="section_5">
            <h2>Contact</h2>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
                tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
                semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien
                ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.
                Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac
                dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus,
                tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi,
                tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
        </div>
    </div>

    <!-- Scripts -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            let menuScrollTimer = null;
            $(".nav a").click(function (e) {
                // Prevent default behaviour ( scroll to element )
                e.preventDefault();
                if (menuScrollTimer === null) {
                    // Highlight the clicked item
                    $('.nav a.active').removeClass('active');
                    $(this).addClass('active');
                    // Smooth scroll to the target section
                    let target = $(this).attr('href');
                    $('html, body').animate({ scrollTop: $(target).offset().top - 100 }, 1050);
                    // Set `menuScrollTimer` timer
                    // This will prevents multiple clicks on menu items whule the smooth scroll is taking effect
                    // This will also prevent the scroll logic from running
                    menuScrollTimer = setTimeout(function () {
                        clearTimeout(menuScrollTimer);
                        menuScrollTimer = null;
                    }, 1050);
                }
            });

            $(window).scroll(function (e) {
                // Avoid triggering the logic if the scroll event is triggerd from clicking one of the items
                if (menuScrollTimer === null) {
                    let windowTop = $(this).scrollTop();

                    $('.nav a').each(function (event) {
                        if (windowTop >= $($(this).attr('href')).offset().top - 100) {
                            $('.nav .active').removeClass('active');
                            $(this).addClass('active');
                        }
                    });
                }
            });
        });
    </script>

 </body>

 </html>
	<!DOCTYPE html>
	<html>
	<title>Highlight Active Link</title>

	<body>
	<!-- Styles -->
	<style>
	.nav-container {
	position: fixed;
	left: 0;
	top: 0px;
	background: #000;
	display: block;
	width: 100%;
	height: 30px;
	padding: 10px 30px;
	color: #fff;
	z-index: 9;
	}

	.nav {
	margin: 0px;
	}

	.nav a {
	border-radius: 50px;
	display: inline-block;
	margin: 0px 5px;
	transition: background .25s ease-out;
	padding: 5px 10px;
	text-decoration: none;
	color: #fff;
	font-weight: 600;
	letter-spacing: 1px;
	font-family: monospace;
	opacity: 0.8;
	}

	.nav a:hover {
	opacity: 1;
	}

	.nav a.active {
	opacity: 1;
	background: red;
	}

	#content {
	padding-top: 60px;
	}

	#content>div {
	margin-bottom: 30px;
	}

	#content>div#section_5 {
	margin-bottom: 600px;
	}
	</style>

	<!-- Menu -->
	<div class="nav-container">
	<div class="nav">
	<a href="#section_1">Features</a>
	<a href="#section_2">Why Us</a>
	<a href="#section_3">About Us</a>
	<a href="#section_4">Team</a>
	<a href="#section_5">Contact</a>
	</div>
	</div>
	<!-- Content -->
	<div id="content">
	<div id="section_1">
	<h2>Features</h2>

	<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis
	egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
	sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo.
	Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
	<code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum,
	eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis
	pulvinar facilisis. Ut felis.
	</p>

	<h2>Header Level 2</h2>

	<ol>
	<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
	<li>Aliquam tincidunt mauris eu risus.</li>
	</ol>

	<blockquote>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet
	congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis
	mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare
	est.</p>
	</blockquote>

	<h3>Header Level 3</h3>

	<ul>
	<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
	<li>Aliquam tincidunt mauris eu risus.</li>
	</ul>

	<pre><code>
	#header h1 a {
	display: block;
	width: 300px;
	height: 80px;
	}
	</code></pre>
	</div>
	<div id="section_2">
	<h2>Why Us</h2>
	<ul>
	<li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in,
	diam. Sed arcu. Cras consequat.</li>
	<li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu
	erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus,
	metus.</li>
	<li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem
	tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li>
	<li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum
	vulputate, nunc.</li>
	</ul>

	</div>
	<div id="section_3">
	<h2>About Us</h2>
	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
	tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
	semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien
	ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.
	Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac
	dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus,
	tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi,
	tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
	</div>
	<div id="section_4">
	<h2>Team</h2>
	<dl>
	<dt>Definition list</dt>
	<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
	aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
	commodo consequat.</dd>
	<dt>Lorem ipsum dolor sit amet</dt>
	<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
	aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
	commodo consequat.</dd>
	</dl>
	</div>
	<div id="section_5">
	<h2>Contact</h2>
	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
	tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
	semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien
	ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.
	Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac
	dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus,
	tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi,
	tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
	</div>
	</div>

	<!-- Scripts -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script>
	$(document).ready(function () {
	let menuScrollTimer = null;
	$(".nav a").click(function (e) {
	// Prevent default behaviour ( scroll to element )
	e.preventDefault();
	if (menuScrollTimer === null) {
	// Highlight the clicked item
	$('.nav a.active').removeClass('active');
	$(this).addClass('active');
	// Smooth scroll to the target section
	let target = $(this).attr('href');
	$('html, body').animate({ scrollTop: $(target).offset().top - 100 }, 1050);
	// Set `menuScrollTimer` timer
	// This will prevents multiple clicks on menu items whule the smooth scroll is taking effect
	// This will also prevent the scroll logic from running
	menuScrollTimer = setTimeout(function () {
	clearTimeout(menuScrollTimer);
	menuScrollTimer = null;
	}, 1050);
	}
	});

	$(window).scroll(function (e) {
	// Avoid triggering the logic if the scroll event is triggerd from clicking one of the items
	if (menuScrollTimer === null) {
	let windowTop = $(this).scrollTop();

	$('.nav a').each(function (event) {
	if (windowTop >= $($(this).attr('href')).offset().top - 100) {
	$('.nav .active').removeClass('active');
	$(this).addClass('active');
	}
	});
	}
	});
	});
	</script>

	</body>

	</html>