本文是《原创(共22篇)》专题的第 6 篇。阅读本文前,您可以先阅读前面的一些文章:
第一步
您可以使用以下步骤在B2主题中创建一个悬浮目录:
- 在主题文件夹中创建一个新的JavaScript文件,例如“floating-menu.js”。
- 在该文件中编写以下代码:
jQuery(document).ready(function($) { // 创建目录 var toc = ''; var level = 0; var maxLevel = 3; $('#content').find('h1, h2, h3, h4, h5, h6').each(function() { // 获取标题级别 level = parseInt(this.tagName.substring(1)); // 如果标题级别小于最大级别,则添加到目录中 if (level <= maxLevel) { // 添加锚点 $(this).attr('id', 'heading-' + level + '-' + $(this).index()); // 添加目录项 toc += '<li class="toc-level-' + level + '"><a href="#heading-' + level + '-' + $(this).index() + '">' + $(this).text() + '</a></li>'; } }); // 如果目录不为空,则创建悬浮目录 if (toc !== '') { var tocHtml = '<ul class="toc">' + toc + '</ul>'; $('body').append('<div id="floating-menu">' + tocHtml + '</div>'); // 设置目录项的样式 $('#floating-menu .toc li').each(function() { $(this).css('margin-left', (parseInt($(this).attr('class').substring(10)) - 1) * 20 + 'px'); }); // 监听窗口滚动事件 $(window).scroll(function() { // 如果滚动距离大于目录位置,则显示悬浮目录 if ($(window).scrollTop() > $('#floating-menu').offset().top) { $('#floating-menu').addClass('floating'); } else { $('#floating-menu').removeClass('floating'); } // 更新当前目录项的样式 $('#floating-menu .toc li').removeClass('current'); $('#content').find('h1, h2, h3, h4, h5, h6').each(function() { // 获取标题级别 level = parseInt(this.tagName.substring(1)); // 如果标题级别小于最大级别,则更新当前目录项的样式 if (level <= maxLevel && $(window).scrollTop() >= $(this).offset().top - 20) { $('#floating-menu .toc li').removeClass('current'); $('#floating-menu .toc li:nth-child(' + ($(this).index() + 1) + ')').addClass('current'); } }); }); } });
第二步
在主题的“functions.php”文件中添加以下代码,将JavaScript文件添加到主题中:function b2_enqueue_scripts() { wp_enqueue_script('floating-menu', get_template_directory_uri() . '/floating-menu.js', array('jquery'), '1.0', true); } add_action('wp_enqueue_scripts', 'b2_enqueue_scripts');
- 在主题的“style.css”文件中添加以下代码,定义悬浮目录的样式:
#floating-menu { position: fixed; top: 50%; left: 20px; transform: translateY(-50%); z-index: 9999; } #floating-menu.floating { top: 20px; } #floating-menu .toc { list-style: none; margin: 0; padding: 0; } #floating-menu .toc li { margin-bottom: 5px; transition: all 0.2s ease; } #floating-menu .toc li.current { font-weight: bold; }
第三步
保存文件并刷新网站,您应该可以看到一个悬浮目录出现在页面的左侧。当您滚动页面时,目录将保持固定位置并更新当前目录项的样式。
您已阅读完《原创(共22篇)》专题的第 6 篇。您可以继续阅读该专题下面的其它文章:
好像失效了噢