/ 2018-11-13
当你浏览百度百科时，如果当页的内容很多，当页面下滑到一定程度时，就会在页面的最右侧出现附加导航(如下图所示)，具体实现方法如下：
1. 需要引入的CSS文件
#sideToolbar {
position: fixed;
padding: 10px;
background: #fff;
}
#sideToolbar-btn {
position: absolute;
display: block;
width: 45px;
height: 45px;
cursor: pointer;
background: url("https://files.cnblogs.com/files/jin-xin/sideToolbar.ico") no-repeat scroll 0 0 transparent;
bottom: 58px;
left: 10px;
}
#sideToolbar-btn.disable {
background: url("https://files.cnblogs.com/files/jin-xin/sideToolbar.ico") no-repeat scroll -86px 0 transparent;
}
#sideToolbar-btn.disable:hover {
background: url("https://files.cnblogs.com/files/jin-xin/sideToolbar.ico") no-repeat scroll -129px 0 transparent;
}
#sideToolbar-up {
position: absolute;
left: 10px;
bottom: 10px;
display: block;
width: 45px;
height: 45px;
border-radius: 2px;
background: url("https://files.cnblogs.com/files/jin-xin/sideToolbar.ico") no-repeat scroll 0px -50px transparent;
}
#sideToolbar-up:hover {
background: url("https://files.cnblogs.com/files/jin-xin/sideToolbar.ico") no-repeat scroll -63px -51px transparent;
}2. 需要引入的js文件
(function() {
'use strict';
function SideToolbar(wrapper, options) {
var defaults = {
width: 260,
height: 300,
right: 10,
bottom: 10,
speed: 300,
showHeight: 600
};
this.settings = $.extend(defaults, options);
this.$wrapper = $(wrapper);
this.isVisible = false;
this.$wrapper.css({display: 'none'});
this.initView();
this.bindEvents();
}
SideToolbar.prototype = {
initView: function() {
var btn = '<a id="sideToolbar-btn" href="javascript:void(0);"></a>'
var up = '<a id="sideToolbar-up" href="javascript:void(0)"></a>';
this.$wrapper.append(btn).append(up);
this.fixPosition();
},
fixPosition: function() {
this.$wrapper.css({
width: this.settings.width,
height: this.settings.height,
right: this.settings.right,
bottom: this.settings.bottom
});
},
bindEvents: function() {
var context = this;
$(document).scroll(function() {
if ($(document).scrollTop() > context.settings.showHeight) {
if (context.isVisible == false) {
context.isVisible = true;
context.show();
}
} else {
if (context.isVisible == true) {
context.isVisible = false;
context.hide();
}
}
});
// 必须在绑定document的scroll事件处理函数之后才能手动触发该事件
$(document).trigger('scroll');
$('#sideToolbar-btn').click(function() {
if ($(this).hasClass('disable')) {
$(this).removeClass('disable');
context.$wrapper.find(':first-child').css({visibility: 'visible'});
} else {
$(this).addClass('disable');
context.$wrapper.find(':first-child').css({visibility: 'hidden'});
}
});
$('#sideToolbar-up').click(function() {
// $(document).animate({scrollTop: ..}) 会出错
// $(document).scrollTop() 可以
$('body, html').animate({
scrollTop: 0
}, context.settings.speed, 'linear');
});
},
show: function() {
// fadeIn、fadeOut 操作的是 display 属性，不能跟 visibility 同时使用=
this.$wrapper.fadeIn(this.settings.speed);
},
hide: function() {
this.$wrapper.fadeOut(this.settings.speed);
}
};
window.SideToolbar = SideToolbar;
$.fn.sideToolbar = function(options) {
var sideToolbar = new SideToolbar(this, options);
return $(this);
};
})(jQuery);3. html代码
<style>
#content {
width: 600px;
height: 2000px;
background: #eee;
}
#sideToolbar {
background: yellow;
}
.live li{
font-weight: 400;
}
</style>
</head>
<body>
<div id="content">
<h2 id="title-0-0-0">第一部分</h2>
<p>在对问题建立模型的过程中，我们会遇到非常多不同层面的问题，所以我们需要很多领域的知识去解决这些问题。</p>
<ul>
<li>我们需要管理被操作的数据，因为数据与数据之前是相互有关联的。将数据结构化，通常是编程的第一步。关于结构化数据的相关理论以及实践，需要有一个专门的学科分支或者说课题去研究——<strong>数据结构</strong>。</li>
<li>我们需要解决一个具体的问题，这个具体的问题如何一步步去解决，过程是怎么样子的——<strong>算法</strong>。</li>
<li>我们需要将解决方案进行自动化，并以代码的形式进行交付——<strong>编程语言</strong>。</li>
<li>如果将一个抽象的模型进行编码实现，如何实现“这个功能”，如何实现“那个功能”——<strong>编程技巧</strong>。</li>
<li>问题的规模大了，众多代码糅合在一起，连程序员自己都看不懂了！怎么来拆分、模块化这些代码——<strong>设计</strong>。</li>
<li>代码量已经到了一个人无法完成的地步了，需要团队分工合作才能完成了——<strong>工程化</strong>。</li>
<li>你写的代码我看不懂，没法调用或者很难调用，我写的代码你也看不懂，或者很难看懂。还怎么愉快的玩耍——<strong>编码风格/编码规范</strong>。</li>
<li>问题的规模继续扩大，到了系统工程的规模了，之前学的套路已经不管用了！怎么来构建这个系统才能实现正确、安全、高性能、高可用——<strong>架构</strong>。</li>
</ul>
<p>然而这些也只是一个系统工程中的冰山一角！这是一个庞大的体系。也正是因为软件开发需要考虑到的问题太多且团队成员水品参差不齐，所以团队开发中并不是每个程序员做的事情都是一样的。每个人都有自己的角色、初级工程师、中级工程师、高级工程师、架构师、CTO。。。</p>
<p>所以编程不仅仅只是堆砌代码！</p>
<p>说到这里，我想起来了一件事情——为啥业界普遍鄙视培训出来半道出家的新人？人与人的区别是很大的！我见过培训出来也很牛的。其实，说到底，被鄙视的并不是所有人。而是那些培训了几个月之后发现随便找个工作也能拿“高薪”然后还自认为编程很简单的新人。因为这种经历给了他们一种错觉——编程如此简单，我培训几个月也会嘛！有点像刚学会开车的新司机，很嚣张的对老司机说“开车很简单嘛！你看我也会啊！”。语言和开发工具只是招式，这是外功。而编程思想、经验是内功。这些内功并不是靠短短几个月的培训能够掌握的，这一点有点像中国制造业和日本制造业的区别。动不动赶英超美可不好。。。</p>
<p>编程并不简单！这是一件很严肃的事情。不过今天，我没有办法介绍完所有的方面！或者说，到今天为止，我也并没能掌握所有领域的知识。所以今天我只是分享一些关于编码本身的一些经验。</p>
<p>另外，本文主要分享如何写代码，并不是如何用Java写代码。所以文章中各种语言都有可能出现。</p>
<h2 id="title-0-1-0">第二部分</h2>
<p>在对问题建立模型的过程中，我们会遇到非常多不同层面的问题，所以我们需要很多领域的知识去解决这些问题。</p>
<ul>
<li>我们需要管理被操作的数据，因为数据与数据之前是相互有关联的。将数据结构化，通常是编程的第一步。关于结构化数据的相关理论以及实践，需要有一个专门的学科分支或者说课题去研究——<strong>数据结构</strong>。</li>
<li>我们需要解决一个具体的问题，这个具体的问题如何一步步去解决，过程是怎么样子的——<strong>算法</strong>。</li>
<li>我们需要将解决方案进行自动化，并以代码的形式进行交付——<strong>编程语言</strong>。</li>
<li>如果将一个抽象的模型进行编码实现，如何实现“这个功能”，如何实现“那个功能”——<strong>编程技巧</strong>。</li>
<li>问题的规模大了，众多代码糅合在一起，连程序员自己都看不懂了！怎么来拆分、模块化这些代码——<strong>设计</strong>。</li>
<li>代码量已经到了一个人无法完成的地步了，需要团队分工合作才能完成了——<strong>工程化</strong>。</li>
<li>你写的代码我看不懂，没法调用或者很难调用，我写的代码你也看不懂，或者很难看懂。还怎么愉快的玩耍——<strong>编码风格/编码规范</strong>。</li>
<li>问题的规模继续扩大，到了系统工程的规模了，之前学的套路已经不管用了！怎么来构建这个系统才能实现正确、安全、高性能、高可用——<strong>架构</strong>。</li>
</ul>
<p>然而这些也只是一个系统工程中的冰山一角！这是一个庞大的体系。也正是因为软件开发需要考虑到的问题太多且团队成员水品参差不齐，所以团队开发中并不是每个程序员做的事情都是一样的。每个人都有自己的角色、初级工程师、中级工程师、高级工程师、架构师、CTO。。。</p>
<p>所以编程不仅仅只是堆砌代码！</p>
<p>说到这里，我想起来了一件事情——为啥业界普遍鄙视培训出来半道出家的新人？人与人的区别是很大的！我见过培训出来也很牛的。其实，说到底，被鄙视的并不是所有人。而是那些培训了几个月之后发现随便找个工作也能拿“高薪”然后还自认为编程很简单的新人。因为这种经历给了他们一种错觉——编程如此简单，我培训几个月也会嘛！有点像刚学会开车的新司机，很嚣张的对老司机说“开车很简单嘛！你看我也会啊！”。语言和开发工具只是招式，这是外功。而编程思想、经验是内功。这些内功并不是靠短短几个月的培训能够掌握的，这一点有点像中国制造业和日本制造业的区别。动不动赶英超美可不好。。。</p>
<p>编程并不简单！这是一件很严肃的事情。不过今天，我没有办法介绍完所有的方面！或者说，到今天为止，我也并没能掌握所有领域的知识。所以今天我只是分享一些关于编码本身的一些经验。</p>
<p>另外，本文主要分享如何写代码，并不是如何用Java写代码。所以文章中各种语言都有可能出现。</p>
<h2 id="title-0-2-0">第三部分</h2>
<p>在对问题建立模型的过程中，我们会遇到非常多不同层面的问题，所以我们需要很多领域的知识去解决这些问题。</p>
<ul>
<li>我们需要管理被操作的数据，因为数据与数据之前是相互有关联的。将数据结构化，通常是编程的第一步。关于结构化数据的相关理论以及实践，需要有一个专门的学科分支或者说课题去研究——<strong>数据结构</strong>。</li>
<li>我们需要解决一个具体的问题，这个具体的问题如何一步步去解决，过程是怎么样子的——<strong>算法</strong>。</li>
<li>我们需要将解决方案进行自动化，并以代码的形式进行交付——<strong>编程语言</strong>。</li>
<li>如果将一个抽象的模型进行编码实现，如何实现“这个功能”，如何实现“那个功能”——<strong>编程技巧</strong>。</li>
<li>问题的规模大了，众多代码糅合在一起，连程序员自己都看不懂了！怎么来拆分、模块化这些代码——<strong>设计</strong>。</li>
<li>代码量已经到了一个人无法完成的地步了，需要团队分工合作才能完成了——<strong>工程化</strong>。</li>
<li>你写的代码我看不懂，没法调用或者很难调用，我写的代码你也看不懂，或者很难看懂。还怎么愉快的玩耍——<strong>编码风格/编码规范</strong>。</li>
<li>问题的规模继续扩大，到了系统工程的规模了，之前学的套路已经不管用了！怎么来构建这个系统才能实现正确、安全、高性能、高可用——<strong>架构</strong>。</li>
</ul>
<p>然而这些也只是一个系统工程中的冰山一角！这是一个庞大的体系。也正是因为软件开发需要考虑到的问题太多且团队成员水品参差不齐，所以团队开发中并不是每个程序员做的事情都是一样的。每个人都有自己的角色、初级工程师、中级工程师、高级工程师、架构师、CTO。。。</p>
<p>所以编程不仅仅只是堆砌代码！</p>
<p>说到这里，我想起来了一件事情——为啥业界普遍鄙视培训出来半道出家的新人？人与人的区别是很大的！我见过培训出来也很牛的。其实，说到底，被鄙视的并不是所有人。而是那些培训了几个月之后发现随便找个工作也能拿“高薪”然后还自认为编程很简单的新人。因为这种经历给了他们一种错觉——编程如此简单，我培训几个月也会嘛！有点像刚学会开车的新司机，很嚣张的对老司机说“开车很简单嘛！你看我也会啊！”。语言和开发工具只是招式，这是外功。而编程思想、经验是内功。这些内功并不是靠短短几个月的培训能够掌握的，这一点有点像中国制造业和日本制造业的区别。动不动赶英超美可不好。。。</p>
<p>编程并不简单！这是一件很严肃的事情。不过今天，我没有办法介绍完所有的方面！或者说，到今天为止，我也并没能掌握所有领域的知识。所以今天我只是分享一些关于编码本身的一些经验。</p>
<p>另外，本文主要分享如何写代码，并不是如何用Java写代码。所以文章中各种语言都有可能出现。</p>
<h2 id="title-0-3-0">第四部分</h2>
<p>在对问题建立模型的过程中，我们会遇到非常多不同层面的问题，所以我们需要很多领域的知识去解决这些问题。</p>
<ul>
<li>我们需要管理被操作的数据，因为数据与数据之前是相互有关联的。将数据结构化，通常是编程的第一步。关于结构化数据的相关理论以及实践，需要有一个专门的学科分支或者说课题去研究——<strong>数据结构</strong>。</li>
<li>我们需要解决一个具体的问题，这个具体的问题如何一步步去解决，过程是怎么样子的——<strong>算法</strong>。</li>
<li>我们需要将解决方案进行自动化，并以代码的形式进行交付——<strong>编程语言</strong>。</li>
<li>如果将一个抽象的模型进行编码实现，如何实现“这个功能”，如何实现“那个功能”——<strong>编程技巧</strong>。</li>
<li>问题的规模大了，众多代码糅合在一起，连程序员自己都看不懂了！怎么来拆分、模块化这些代码——<strong>设计</strong>。</li>
<li>代码量已经到了一个人无法完成的地步了，需要团队分工合作才能完成了——<strong>工程化</strong>。</li>
<li>你写的代码我看不懂，没法调用或者很难调用，我写的代码你也看不懂，或者很难看懂。还怎么愉快的玩耍——<strong>编码风格/编码规范</strong>。</li>
<li>问题的规模继续扩大，到了系统工程的规模了，之前学的套路已经不管用了！怎么来构建这个系统才能实现正确、安全、高性能、高可用——<strong>架构</strong>。</li>
</ul>
<p>然而这些也只是一个系统工程中的冰山一角！这是一个庞大的体系。也正是因为软件开发需要考虑到的问题太多且团队成员水品参差不齐，所以团队开发中并不是每个程序员做的事情都是一样的。每个人都有自己的角色、初级工程师、中级工程师、高级工程师、架构师、CTO。。。</p>
<p>所以编程不仅仅只是堆砌代码！</p>
<p>说到这里，我想起来了一件事情——为啥业界普遍鄙视培训出来半道出家的新人？人与人的区别是很大的！我见过培训出来也很牛的。其实，说到底，被鄙视的并不是所有人。而是那些培训了几个月之后发现随便找个工作也能拿“高薪”然后还自认为编程很简单的新人。因为这种经历给了他们一种错觉——编程如此简单，我培训几个月也会嘛！有点像刚学会开车的新司机，很嚣张的对老司机说“开车很简单嘛！你看我也会啊！”。语言和开发工具只是招式，这是外功。而编程思想、经验是内功。这些内功并不是靠短短几个月的培训能够掌握的，这一点有点像中国制造业和日本制造业的区别。动不动赶英超美可不好。。。</p>
<p>编程并不简单！这是一件很严肃的事情。不过今天，我没有办法介绍完所有的方面！或者说，到今天为止，我也并没能掌握所有领域的知识。所以今天我只是分享一些关于编码本身的一些经验。</p>
<p>另外，本文主要分享如何写代码，并不是如何用Java写代码。所以文章中各种语言都有可能出现。</p>
<h2 id="title-0-4-0">第五部分</h2>
<p>在对问题建立模型的过程中，我们会遇到非常多不同层面的问题，所以我们需要很多领域的知识去解决这些问题。</p>
<ul>
<li>我们需要管理被操作的数据，因为数据与数据之前是相互有关联的。将数据结构化，通常是编程的第一步。关于结构化数据的相关理论以及实践，需要有一个专门的学科分支或者说课题去研究——<strong>数据结构</strong>。</li>
<li>我们需要解决一个具体的问题，这个具体的问题如何一步步去解决，过程是怎么样子的——<strong>算法</strong>。</li>
<li>我们需要将解决方案进行自动化，并以代码的形式进行交付——<strong>编程语言</strong>。</li>
<li>如果将一个抽象的模型进行编码实现，如何实现“这个功能”，如何实现“那个功能”——<strong>编程技巧</strong>。</li>
<li>问题的规模大了，众多代码糅合在一起，连程序员自己都看不懂了！怎么来拆分、模块化这些代码——<strong>设计</strong>。</li>
<li>代码量已经到了一个人无法完成的地步了，需要团队分工合作才能完成了——<strong>工程化</strong>。</li>
<li>你写的代码我看不懂，没法调用或者很难调用，我写的代码你也看不懂，或者很难看懂。还怎么愉快的玩耍——<strong>编码风格/编码规范</strong>。</li>
<li>问题的规模继续扩大，到了系统工程的规模了，之前学的套路已经不管用了！怎么来构建这个系统才能实现正确、安全、高性能、高可用——<strong>架构</strong>。</li>
</ul>
<p>然而这些也只是一个系统工程中的冰山一角！这是一个庞大的体系。也正是因为软件开发需要考虑到的问题太多且团队成员水品参差不齐，所以团队开发中并不是每个程序员做的事情都是一样的。每个人都有自己的角色、初级工程师、中级工程师、高级工程师、架构师、CTO。。。</p>
<p>所以编程不仅仅只是堆砌代码！</p>
<p>说到这里，我想起来了一件事情——为啥业界普遍鄙视培训出来半道出家的新人？人与人的区别是很大的！我见过培训出来也很牛的。其实，说到底，被鄙视的并不是所有人。而是那些培训了几个月之后发现随便找个工作也能拿“高薪”然后还自认为编程很简单的新人。因为这种经历给了他们一种错觉——编程如此简单，我培训几个月也会嘛！有点像刚学会开车的新司机，很嚣张的对老司机说“开车很简单嘛！你看我也会啊！”。语言和开发工具只是招式，这是外功。而编程思想、经验是内功。这些内功并不是靠短短几个月的培训能够掌握的，这一点有点像中国制造业和日本制造业的区别。动不动赶英超美可不好。。。</p>
<p>编程并不简单！这是一件很严肃的事情。不过今天，我没有办法介绍完所有的方面！或者说，到今天为止，我也并没能掌握所有领域的知识。所以今天我只是分享一些关于编码本身的一些经验。</p>
<p>另外，本文主要分享如何写代码，并不是如何用Java写代码。所以文章中各种语言都有可能出现。</p>
</div>
<div id="sideToolbar">
<ul>
<li><a href="#title-0-0-0">第一部分</a></li>
<li><a href="#title-0-1-0">第二部分</a></li>
<li><a href="#title-0-2-0">第三部分</a></li>
<li><a href="#title-0-3-0">第四部分</a></li>
<li><a href="#title-0-4-0">第五部分</a></li>
</ul>
</div>
</body>4. 关键的js代码
<script>
$('#sideToolbar').sideToolbar();
</script>这就好了，大功告成，下面是示例图：
(8)
分享至