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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了php 手动滚动时突出显示锚点菜单项相关的知识,希望对你有一定的参考价值。

<?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 );

以上是关于php 手动滚动时突出显示锚点菜单项的主要内容,如果未能解决你的问题,请参考以下文章

点菜单项在面板中打开并判断是否打开

stickyNavbar.js:具有智能锚点链接突出显示的奇妙粘性导航jQuery插件

如何在滚动时突出显示/更改表格视图部分标题的背景颜色

滚动时突出显示菜单(如果到达 div)

向下滚动到部分时突出显示菜单项

单击锚点时如何防止滚动到顶部(href =“ID”)