wordpress如何制作一个跟随滑动的文章目录？Content Index文章目录插件修改篇

大篇幅的文章-->没有目录懒得看...

读文章有技巧-->看目录...

目录很长一直在顶部上下滑动-->太累了...

一个让目录跟随滑动的技巧便产生了....

此文是为了解决在阅读一个篇幅很长的文章时候，会伴随一个文章目录在固定位置便于定位阅读，当文章目录高度大于可视窗口的高度时，文章目录便不会固定跟随防止可视窗口遮挡住多余的目录。

1、wp后台配置

2、修改插件源码关闭自动请求加载插件的css

注释掉加载样式的代码，添加相应的样式到模板的主样式css中

相关文章目录添加的样式：

/*文章目录*/
.content-index a{text-decoration:none;}
.content-index a em{color:#555;}
.content-index a span{text-decoration:underline;font-size:12px;}
.content-index{padding:12px;border:1px solid #ddd;background:#f8f8f8;line-height:160%;max-width:30%;position:relative;z-index:1000;}
.content-index-title{margin:0 0 3px 0;padding:0;font-size:120%;font-weight:bold}
.content-index-toctoggle{font-size:9pt}
.content-index ul{padding:0;margin:0;list-style:none inside none;font-size:100%;}
.content-index ul.children{padding-left:1em;list-style:none inside none}
.content-index li{margin-bottom:0;line-height:18px;}
.content-index li a em{font-size:68%;font-style:normal;font-weight:700;padding-right:5px}
.content-index li a.hide{display:none}
.content-index-heading em{font-size:85%;font-style:normal;font-weight:700;margin-right:5px}
.content-index .content-index-level-1{}
.content-index .content-index-level-2{}
.content-index .content-index-level-3{}
.content-index .content-index-level-4{}
.content-index .content-index-level-5{}
.content-index .content-index-level-6{}
.content-index.moving{position:fixed;top:10px;opacity:0.4;filter:alpha(opacity=40);}
.content-index.moving:hover{position:fixed;top:10px;opacity:1;filter:alpha(opacity=100);}

3、修改插件默认隐藏文章目录

意思就是不让默认展开目录，方法修改插件源码

4、添加js效果，鼠标滚动时目录固定位置

效果中判断了目录很多的情况下高度会大于可视窗口的高

<script>$(function(){(function(){var $mulu=$('#content-index');var mulu_top =$mulu.offset().top;var mulu_left =$mulu.offset().left;var w_width=$('.article-content').outerWidth();$(window).scroll(function(){if($(this).scrollTop()>mulu_top){if($('#content-index-contents').is(':hidden')){$mulu.addClass('moving').css({'left':mulu_left-10+'px'});}else{var clientH=document.documentElement.clientHeight;var mulu_w=$mulu.outerWidth();var mulu_h=$mulu.outerHeight();if(mulu_h<clientH){$mulu.css({'maxWidth':w_width/3-20+'px'})$mulu.addClass('moving').css({'left':mulu_left+70-mulu_w+'px'});}else{$mulu.removeClass('moving').css({'left':''});}}}else{$mulu.removeClass('moving').css({'left':''});}})})();})</script>

4、demo参考地址：

http://17dev.sinaapp.com/qianduan-xiulian-gonglue.html

http://17dev.sinaapp.com/201410_qian_duan_zi_yuan_fen_xiang.html

wordpress如何制作一个跟随滑动的文章目录？Content Index文章目录插件修改篇相关推荐

axure原型案例_Axure RP9原型案例：制作一个可以滑动的菜单
摘要:在PC端的产品中我们会常常见到滑动式菜单,当鼠标移入菜单上方,向下或向右自动滑动弹出子菜单,当页面信息层级较多或功能较多时,在产品设计时经常会用到这种滑动式菜单.今天就和大家分享如下制作滑动式菜 ...
【Unity学习】制作一个可滑动的公告栏
1.新建Image组件做公告底板(Note) 在Canvas组件(画布)中新建一个Image组件(图片)做公告底板,并在组件属性栏中设置合适的图片大小.颜色及透明度 2.制作公告图标(Title ,可 ...
如何制作一个可视化大屏模板
今天我们来一篇demo实例来讲述如何用finereport制作一个合格的大屏demo. 按照文章中所言的几种常见排布方式: 以上是几种常见的大屏排布方式,依据各个大屏模板所需要展示的具体信息我们可以自 ...
制作一个每日一图小工具
如何制作一个发送每日一图的小工具? 目录如何制作一个发送每日一图的小工具? 前言第一步:获取图片方法一:使用随机图片接口方法二:从Pixiv网站获取好看的插图第二步:存储图片第三步:将图片 ...
php做一个文章页面,wordpress主题制作教程(十):制作文章单页模板single.php
在前一篇教程中我们已经只做好了index.php,这个文件可以当首页使用,也可以当分类.标签等归档页使用,这篇教程我们来制作一下文章的具体页面-文章单页模板,如果我们没有但页模板single.php, ...
wordpress主题制作教程(十):制作文章单页模板single.php
wordpress主题制作教程(十):制作文章单页模板single.php 您现在的位置:阿树工作室->wordpress主题教程->基础教程 2012.7.25 浏览数:39,982 ...
Flutter 制作一个具有酷炫液体滑动效果的酷炫入门页面
本文主要介绍如何使用 Flutter 制作一个具有酷炫液体滑动效果的酷炫入门页面我将向您展示如何使用 Flutter 制作一个具有酷炫液体滑动效果的酷炫入门页面,所以不用多说,让我们开始吧.在本课程 ...
制作一个简易的UGUI无限滑动框(Unity)
市面上有很多这种无限拖拽的插件但是功能细化的太严重了改的话有些耗时如果没有太多严苛的需求没必要改工程量比较大的插件完全可以自己写一个 using System.Collections; usi ...
如何制作一个类似Tiny Wings的游戏 Cocos2d-x 2.1.4
在第一篇<如何使用CCRenderTexture创建动态纹理>基础上,增加创建动态山丘,原文<How To Create A Game Like Tiny Wings with Co ...