CSS与Js实现博客园侧边目录与页内滑动

内容索引：

• HOW TO USE
• CSS
• JS
• 效果展示
• 后续1：目录太长
• 后续2：入场动画
• 点个赞?

存着备用。。

长篇文章如果没有侧边目录的话，会很不方便浏览。

代码是网上找来改的。

首先，我们把目标区域（目录）用一个div包装一下：

">

针对这个div写CSS（在后台管理处设置），把目录固定在浏览器的右上角：

            #diy_right_menu {
     
                opacity: 0.05;
                position: fixed;
                right: 2%;
                top: 2%;
                width: 20em;
                margin-top: 1em;
                background-color: black;
                padding: 1em;
                border-radius: 0;
                transition: 0.6s ease-in-out;
                color: white;
            }
            
            #diy_right_menu:hover {
     
                color: white;
                right: 2%;
                top: 2%;
                border-radius: 5%;
                opacity: 1.3;
                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
                transition: 0.4s ease-in-out;
            }
            
            #diy_right_menu a {
     
                color: #f2f2f2cc;
                transition: 0.4s ease-in-out;
            }
            
            #diy_right_menu a:hover {
     
                font-size: larger;
                color: blue;
                background-color: bisque;
                transition: 0.4s ease-in-out;
            }

因为一直飘在那里会遮挡文字，所以设定为鼠标移动过去才显示出来。

虽然我也试过其它方法，例如把这个div设置为可拖动（如下↓ 原作者链接）、类似qq一样隐藏在边缘（css即可实现），但是感觉都太繁琐了、甚至还有点卡。。

点击链接后进行页内滑动（jquery博客园自带）：

用css包装后的效果示意图（实际滑动很流畅）：

 

后续1：目录太长

两行css解决

overflow-y: auto;
max-height: 450px;

后续2：添加入场动画：

            @-webkit-keyframes myfirst {
                /* Safari and Chrome */
                0% {
                    transform: translateX(8px);
                }
                33% {
     
                    opacity: 1;
                    border-radius: 5%;
                    background-color: bisque;
                }
                66% {
                }

-webkit-animation: myfirst 1.8s;

 

转载于:https://www.cnblogs.com/xkxf/p/9449982.html