php 手动滚动时突出显示锚点菜单项

Posted 2021-05-05

<?php // Do not copy this.

function custom_footer_scripts() {
    if ( is_home() || is_front_page() ) :
?>
    <script type="text/javascript">
    
    (function($){
        // Cache selectors
        var lastId,
            topMenu = $("#menu-main-navigation"),
            topMenuHeight = topMenu.outerHeight()+1,
            
            // All list items
            menuItems = topMenu.find("a"),
            
            // Anchors corresponding to menu items
            scrollItems = menuItems.map(function(){
                var item = $($(this).attr("href"));
                if (item.length) { return item; }
            });
 
        // Bind to scroll
        $(window).scroll(function(){
           // Get container scroll position
           var fromTop = $(this).scrollTop()+topMenuHeight;
           
           // Get id of current scroll item
           var cur = scrollItems.map(function(){
             if ($(this).offset().top < fromTop)
               return this;
           });
           
           // Get the id of the current element
           cur = cur[cur.length-1];
           var id = cur && cur.length ? cur[0].id : "";
           
           if (lastId !== id) {
                lastId = id;
                
                // Set/remove active class
                menuItems
                    .parent().removeClass("current-menu-item")
                    .end().filter("[href='#"+id+"']").parent().addClass("current-menu-item");
           }                   
        });
    })(jQuery);

    </script>
    <?php
    endif;
}
add_action( 'wp_footer', 'custom_footer_scripts', 99 );