wordpress 实现侧边栏锚链接目录的JS代码

搭配 JS / jquery/3.6.0

实现

<div class="sidebar-hidden" id="sidebar-hidden">
 

<div class="sider-list-1">


 <h3>The Contents</h3> 
 <div id="navDivId"> </div>
 
</div>

 


    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> -->
    <script type="text/javascript">
        $(function() {
            // *************功能一：生成目录******************************
            var eles = ['h1', 'h2' , 'h3' ]
            // 获取文章里 h1 到 h6 的元素 , 'h3', 'h4', 'h5', 'h6'
            var doms = document.querySelector('.entry-content').querySelectorAll(eles.toString())
            if (! doms || ! doms.length) {
                return ;
            }
            // 创建目录盒子
            let $ul = $('<ul class="catalogbox"></ul>')
            // 目录的下标
            let index = 0
            for (let h of doms) {
                let tag = h.nodeName.toLowerCase()
                if (! eles.includes(tag)) {
                    continue ;
                }
                
                // 生成每个目录的id，绑定在 h 标签上
                let id = `catalog_${++index}`
                h.setAttribute('id', id)
                // 获取 h 标签的内容
                let text = h.innerHTML.replace(/<\/?[^>]+>/g, '')
                // 生成 li 元素，需要绑定h 的id，以便于点击目录时可以找到对应的 h 标签
                let level = tag.replace('h', '')   // 获取当前目录级别，需要根据目录级别设置css
                // let $li = `<li  catalog="${id}">${text}</li>`
 
                let $li = `<li style="--level: ${level}" catalog="${id}"" class ="ch${level}">${text}</li>`


                $ul.append($li)

            }

   $('#navDivId').append($ul)

             

             // *************功能二：点击目录滚动到对应区域******************************
            $('li[catalog]').on('click', function() {
                // 获取每个li 上绑定的catalog值，对应着唯一的 h 标签
                let id = $(this).attr('catalog')
                document.querySelector(`#${id}`).scrollIntoView({
                    behavior: 'smooth'
                })
            })

            // *************功能三：目录跟随滚动高亮******************************
            window.addEventListener('scroll', function() {
                // 获取浏览器滚动条距离顶部的高度
                let scroll = document.documentElement.scrollTop || document.body.scrollTop
                
                for (let i = doms.length - 1; i >= 0 ; i--) {
                    // 倒叙遍历所有的 h 标签，如果滚动条的 scrollTop 刚刚大于 h 区域的 offsetTop，
                    // 将此h 标签对应的 目录 设置为高亮
                    if (parseInt(scroll) >= Math.ceil(doms[i].offsetTop) ) {
                        let id = doms[i].getAttribute("id")
                        $('li[catalog]').each(function() {
                            if ($(this).attr('catalog') === id) {
                                $(this).addClass('current-catalog')
                            } else {
                                $(this).removeClass('current-catalog')
                            }
                        })
                        break ;
                    }
                }
            })
            
        })

    </script>




 


</div> 
<!-- sidebar-hidden -->


<!--实现自动隐藏功能 距离底部距离识别 
    var div1 =  document.getElementById("sidebar-hidden");
    var div2 = document.getElementById("footer-bottom"); 
 -->
<script>
  // 获取返回顶部按钮
  const backToTopButton = document.querySelector('.sidebar-hidden');

  // 监听滚动事件
  window.addEventListener('scroll', () => {
    // 如果页面滚动距离大于100px，则显示返回顶部按钮
    if (window.pageYOffset > 180) {
      //backToTopButton.style.display = 'block';
       backToTopButton.style.position = 'fixed';  
    } else {
      // 否则隐藏
      // backToTopButton.style.display = 'none';
          // backToTopButton.style.display = "block";
      backToTopButton.style.position = 'static';
    }
  });

  // 返回顶部函数
  function scrollToTop() {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }



// window.addEventListener('scroll', function() {
//     var element = document.getElementById("sidebar-hidden"); // 替换为你的元素ID
 
window.addEventListener('scroll', function() {
    var div1 =  document.getElementById("sidebar-hidden");
    var div2 = document.getElementById("footer-bottom"); 

    
    var div1Rect = div1.getBoundingClientRect();
    var div2Rect = div2.getBoundingClientRect();
    
 
    if ( div2Rect.top <=  890) {
  
        div1.style.display = "none";
    } else  {
        // 确保在不满足条件时恢复显示
        //     if (div1.style.display === "block") {
        // return; // 已经隐藏，避免重复操作
        // }
      
        div1.style.display = "block";
    }
});

 

</script>

CSS 控制 实现

.sidebar-hidden {
  display:block; /* 初始时隐藏 */
/*    position: fixed;*/
position:static;  
top: 68px;
padding: 15px 0 20px 18px;
/*  background-color: #333;
    color: white;
    border-radius: 5px; 
     */
cursor: pointer;
transition: all 0.3s ease;
width:inherit;
border-left: 1px solid #F2F2F2; 
}
 

#navDivId  li[catalog] {
  padding-left: calc(var(--level) * 10px) ;
}