下面,就是一个自制的jquery小插件(affix),用于固定某个元素在浏览器顶部(也可以自定义距离浏览器顶部多高的位置),不随滚动条的下拉而移动
;(function(){
$.fn.extend({
'affix':function(opt){
var DEFAULT = {
'offLeft':'0',
'offT':'0'
};
var options = $.extend({},DEFAULT,opt);
this.each(function(){
var obj = $(this);
var offTop = obj.offset().top;
$(window).bind('scroll',checkTop);
function checkTop(){
var scrollT = $(window).scrollTop();
if(scrollT >= offTop) {
obj.css({'position':'fixed','left':'0','top':options.offT});
} else {
obj.css({'position':'static'});
}
}
});
}
});
})($)
这个插件是一个符合jquery插件规范的,大家可以参照这种jquery插件的写法,来封装自己的插件。
那么在requireJS中,如何使用呢?
<script src="js/require-2.1.11.js" data-main="js/main"></script>
在我们的项目中引入requireJS,data-main="js/main"
main.js
就是我们项目中js文件的入口文件
require.config({
paths:{
'jquery': [
'https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min',
'https://cdn.bootcss.com/jquery/2.1.4/jquery.min'
]
},
shim:{
'affix':{
deps:['jquery']
}
}
});
require(['affix'],function(){
$('.subnav').affix();
$('.aside').affix();
});
因为affix是一个深度依赖jquery的小插件,所以我们在require中引入affix的时候,需要先配置affix的依赖项
shim:{
'affix':{
deps:['jquery']
}
}
那么页面中class为subnav和aside的元素,当滚动条往下拉的时候 ,元素滚动页面顶部的时候,就会被定住,不会继续往上滚动了。
一个 vue 的学习交流群:685486827
写在最后: 约定优于配置——-软件开发的简约原则.
——————————– (完)————————————–
我的
个人网站:https://neveryu.github.io/guestbook/
Github: https://github.com/Neveryu
新浪微博:http://weibo.com/Neveryu
更多学习资源请关注我的新浪微博….
width="100%" height="500" class="share_self" scrolling="no" src="http://widget.weibo.com/weiboshow/index.php?language=&width=0&height=550&fansRow=1&ptype=1&speed=0&skin=8&isTitle=1&noborder=1&isWeibo=1&isFans=0&uid=5346488237&verifier=d529ff3a&dpc=1">