未突出显示活动锚链接

Question

I have been staring at this code for far too long, unfortunately I do not see the problem.

I am trying to get the active menu entry highlighted when the relevant div gets scrolled into view. But nothing is happening and no errors are being thrown in the console.

My menu html:

<section class="LeftAnchorNav" style="display: block;">
        <nav id="LeftAnchorNav">
            <div class="container" style="padding-left: 50px;">
                    <div class="col-md-4 LeftAnchorNavWrapper">

                        <ul class="LeftAnchorNavMenu">
                                    <li class="leftanchorlink">
                                        <a class="leftlink" href="#20a51af3-f8b0-4ef9-ba73-cf3cd0a321b9">About us</a>
                                    </li>
                                    <li class="leftanchorlink">
                                        <a class="leftlink" href="#d736bc13-a2a7-48d4-8ecc-75b9a17f801b">Demo Center</a>
                                    </li>
                                    <li class="leftanchorlink">
                                        <a class="leftlink" href="#545a6339-87e4-41ed-ad51-70c3788cedee">Testimonial</a>
                                    </li>
                                    <li class="leftanchorlink">
                                        <a class="leftlink" href="#9355324a-6219-4300-ae97-aa77bf67dab4">Newsletter</a>
                                    </li>
                                    <li class="leftanchorlink">
                                        <a class="leftlink" href="#0c70b0db-3e70-4faa-ab98-154b4eae498e">Blog</a>
                                    </li>
                                    <li class="leftanchorlink">
                                        <a class="leftlink" href="#4903bc53-b862-42f0-a600-e21061204e42">Contact</a>
                                    </li>
                                    <li class="leftanchorlink">
                                        <a class="leftlink" href="#002f6fd7-758b-4b27-8c75-0ce087ee826a">Solution Finder</a>
                                    </li>
                        </ul>

                    </div>
            </div>
        </nav>
    </section>

An example div:

<div class="block anchorblock col-lg-12 col-md-12 col-sm-12 col-xs-12 span12 "><div id="20a51af3-f8b0-4ef9-ba73-cf3cd0a321b9"></div>
</div>

My jquery/js:

if ($('.LeftAnchorNav').length > 0) {

            // prepare the variables
            var lastID;
            var anchorMenu = $(".LeftAnchorNavMenu");
            var anchorMenuHeight = anchorMenu.outerHeight() + 100;
            var anchorMenuItems = anchorMenu.find(".leftlink");
            var anchorMenuItemsTarget = anchorMenuItems.map(function () {
                var item = $($(this).attr("href"));
                if (item.length) { return item; }
            });

            // bind everything to the scrolling
            $(window).scroll(function () {

                // get anchornav container scroll position and add  buffer
                var fromTop = $(this).scrollTop() + anchorMenuHeight + 300;

                // get ID of the current scroll item
                var currentItem = anchorMenuItemsTarget.map(function () {
                    if ($(this).offset().top < fromTop)
                        return this;
                });

                // get the ID of the current element
                currentItem = currentItem[currentItem.length - 1];
                var id = currentItem && currentItem.length ? currentItem[0].id : "";

                if (lastID !== id) {

                    lastID = id;
                    // Set/remove active class
                    anchorMenuItems.removeClass("highlightleftnavactive")
                    anchorMenuItems.filter("[href='#" + id + "']").addClass("highlightleftnavactive");
                }
            });
        }

Answer 1

It's quite fiddly to do the arithmetic for scrolling so this snippet uses IntersectionObserver instead. This has the added benefit of less processing overhead as it just gets informed when the elements come in or go out of view, not every time the user scrolls a bit.

It sets up the observer to observe when any of the relevant elements come into or go out of the viewport. When alerted to that it adds or removes the highlighting class to the related navbar link.

 <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script> <style> .LeftAnchorNav { position: fixed; z-index:1; } .tall { width: 100vw; height: 100vh; background-image: linear-gradient(cyan, magenta, yellow, black); } .highlightleftnavactive { background-color: yellow; } </style> </head> <section class="LeftAnchorNav" style="display: block;"> <nav id="LeftAnchorNav"> <div class="container" style="padding-left: 50px;"> <div class="col-md-4 LeftAnchorNavWrapper"> <ul class="LeftAnchorNavMenu"> <li class="leftanchorlink"> <a class="leftlink" href="#20a51af3-f8b0-4ef9-ba73-cf3cd0a321b9">About us</a> </li> <li class="leftanchorlink"> <a class="leftlink" href="#d736bc13-a2a7-48d4-8ecc-75b9a17f801b">Demo Center</a> </li> <li class="leftanchorlink"> <a class="leftlink" href="#545a6339-87e4-41ed-ad51-70c3788cedee">Testimonial</a> </li> <li class="leftanchorlink"> <a class="leftlink" href="#9355324a-6219-4300-ae97-aa77bf67dab4">Newsletter</a> </li> <li class="leftanchorlink"> <a class="leftlink" href="#0c70b0db-3e70-4faa-ab98-154b4eae498e">Blog</a> </li> <li class="leftanchorlink"> <a class="leftlink" href="#4903bc53-b862-42f0-a600-e21061204e42">Contact</a> </li> <li class="leftanchorlink"> <a class="leftlink" href="#002f6fd7-758b-4b27-8c75-0ce087ee826a">Solution Finder</a> </li> </ul> </div> </div> </nav> </section> <div class="tall"></div> <div class="block anchorblock col-lg-12 col-md-12 col-sm-12 col-xs-12 span12 "><div id="20a51af3-f8b0-4ef9-ba73-cf3cd0a321b9"> An example block coming into and going out of view it belongs to the About us link in the navbar</div> </div> <div class="tall"></div> <script> let callback = (entries) => { entries.forEach(entry => { let id = entry.target.firstChild.id; let leftLink = document.querySelector("a.leftlink[href='#"+ id + "']"); if (entry.isIntersecting) { leftLink.classList.add('highlightleftnavactive');} else { leftLink.classList.remove('highlightleftnavactive');} }); }; const observer = new IntersectionObserver(callback); const anchorBlocks = document.querySelectorAll('.anchorblock'); anchorBlocks.forEach( (anchorBlock) => { observer.observe(anchorBlock); }); </script>