吸顶效果插件

最新推荐文章于 2021-02-06 22:34:56 发布

weixin_34143774

最新推荐文章于 2021-02-06 22:34:56 发布

阅读量141

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xiaozhumaopao/p/5818732.html

版权

function Topfixed(options){
    var opts = $.extend({
        id:'#topFixed',
        fixedClass:'top-fixed'
    },options);

    var fixed = $(opts.id);//获取吸顶目标ID对象
    var marginBottom = parseInt(fixed.css('marginBottom')) || 0;//吸顶目标的下边距
    //var blank = document.createElement('div');//创建空div
    var blank = $('<div></div>');//两种创建空DIV的方式
    var height = parseInt(fixed.outerHeight()+marginBottom-2);//目标元素的高度+下边距
    var scrolltop = $(window).scrollTop();//获取滚动条的滑动距离
    var fixedClass = opts.fixedClass;//获取默认的类名，与$(opts.id)不同，$(opts.id)获取的是对象；opts.fixedClass获取的是名称
    fixed.after(blank);//在吸顶目标外面的后面加空DIV
    $(blank).css({
        "height":height//空DIV的高度=目标ID元素的高度+下边距
    }).hide();//将空DIV隐藏，即正常时不显示
    this.init = function(){
        _show();
        $(window).scroll(function(){
            scrolltop = $(window).scrollTop();
            _show();
        });
    }
    function _show(){

        if(scrolltop>47){//滚动条滚过的长度大于吸顶元素距离top的长度。47怎么得到的？
            fixed.addClass(fixedClass);//目标吸顶元素增加类：fixedClass，该类在common.less中做了定义
            $(blank).show();//显示出空DIV,由于position的缘故，空div相当于占位符，放在了吸顶目标的下面。
        }else{
            fixed.removeClass(fixedClass);
            $(blank).hide();
        }
    }
}

html文件中对应的调用是：（注意使用的时候要修改47）

<script type="text/javascript" src="js/topfixed.js"></script>
<script>
    new Topfixed().init();
</script>

css文件对应的top-fixed为：

top-fixed{
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
        width: 100%;
        .top-con{
            margin: 0 20px;
            border-bottom: 1px solid #ccc;
        }
    }

增加浏览器大小变化，吸顶元素的相对位移不变：

function Topfixed(options){
    var opts = $.extend({
        id:'#box',
        fixedClass:'top-fixed',
        prevClass:'oa-plane'//吸顶元素相邻元素，用来作为参考系，确定浏览器变化时也能够使吸顶元素的位置正确
    },options);
    var fixed = $(opts.id);//获取吸顶目标ID对象
    var marginBottom = parseInt(fixed.css('marginBottom')) || 0;//吸顶目标的下边距
    //var blank = document.createElement('div');//创建空div
    var blank = $('<div></div>');//两种创建空DIV的方式
    var height = parseInt(fixed.outerHeight()+marginBottom-2);//目标元素的高度+下边距
    var scrolltop = $(window).scrollTop();//获取滚动条的滑动距离
    var fixedClass = opts.fixedClass;//获取默认的类名，与$(opts.id)不同，$(opts.id)获取的是对象；opts.fixedClass获取的是名称
    var fixedTop=fixed.offset().top;
    var fixedLeft=fixed.offset().left;
    var prevClass=opts.prevClass;
    fixed.after(blank);//在吸顶目标外面的后面加空DIV
    $(blank).css({
        "height":height//空DIV的高度=目标ID元素的高度+下边距
    }).hide();//将空DIV隐藏，即正常时不显示
    function _show(){
        var prevLeft3=$('.'+prevClass).offset().left;
        fixed.css('left',prevLeft3);
        if(scrolltop>fixedTop){//滚动条滚过的长度大于吸顶元素距离top的长度。47怎么得到的？
            fixed.addClass(fixedClass);//目标吸顶元素增加类：fixedClass，该类在common.less中做了定义
            $(blank).show();//显示出空DIV,由于position的缘故，空div相当于占位符，放在了吸顶目标的下面。
        }else{
            fixed.removeClass(fixedClass);
            $(blank).hide();
        }
        $(window).resize(function() {
            var prevLeft2=$('.'+prevClass).offset().left;
            fixed.css('left',prevLeft2);  
        });
    }
    this.init = function(){
        _show();
        $(window).scroll(function(){
            scrolltop = $(window).scrollTop(); 
            _show();
        });
    }

}

js文件调用方式：

require('./topfixed.js')
    new Topfixed({
        id:'#topFixed'
    }).init();

改动，增加参考元素有个偏移量，比如吸顶元素没有上下元素可以参考，只有左侧元素可以参考：

function Topfixed(options){
    var opts = $.extend({
        id:'#box',
        fixedClass:'top-fixed',
        prevClass:'oa-plane',//吸顶元素相邻元素，用来作为参考系，确定浏览器变化时也能够使吸顶元素的位置正确
        offsetLeft:0
    },options);
    var fixed = $(opts.id);//获取吸顶目标ID对象
    var marginBottom = parseInt(fixed.css('marginBottom')) || 0;//吸顶目标的下边距
    //var blank = document.createElement('div');//创建空div
    var blank = $('<div></div>');//两种创建空DIV的方式
    var height = parseInt(fixed.outerHeight()+marginBottom-2);//目标元素的高度+下边距
    var scrolltop = $(window).scrollTop();//获取滚动条的滑动距离
    var fixedClass = opts.fixedClass;//获取默认的类名，与$(opts.id)不同，$(opts.id)获取的是对象；opts.fixedClass获取的是名称
    var fixedTop=fixed.offset().top;
    var fixedLeft=fixed.offset().left;
    var prevClass=opts.prevClass;
    var offsetLeft=opts.offsetLeft;
    fixed.after(blank);//在吸顶目标外面的后面加空DIV
    $(blank).css({
        "height":height//空DIV的高度=目标ID元素的高度+下边距
    }).hide();//将空DIV隐藏，即正常时不显示
    function _show(){
        var prevLeft3=$('.'+prevClass).offset().left+offsetLeft+'px';
        fixed.css('left',prevLeft3);
        if(scrolltop>fixedTop){//滚动条滚过的长度大于吸顶元素距离top的长度。47怎么得到的？
            fixed.addClass(fixedClass);//目标吸顶元素增加类：fixedClass，该类在common.less中做了定义
            $(blank).show();//显示出空DIV,由于position的缘故，空div相当于占位符，放在了吸顶目标的下面。
        }else{
            fixed.removeClass(fixedClass);
            $(blank).hide();
        }
        $(window).resize(function() {
            var prevLeft2=$('.'+prevClass).offset().left+offsetLeft+'px';
            fixed.css('left',prevLeft2);  
        });
    }
    this.init = function(){
        _show();
        $(window).scroll(function(){
            scrolltop = $(window).scrollTop(); 
            _show();
        });
    }

}

对应的调用代码：

require('./topfixed.js')
    new Topfixed({
        id:'#topFixed'
    }).init();
    new Topfixed({
        id:'#topFixed2',
        fixedClass:'fixed-box',
        prevClass:'oa-s',
        offsetLeft:930
    }).init();

修改后，增加吸顶元素在距离浏览器上边距多高时，开始发生吸顶效果，startTop默认为0；

function Topfixed(options){
    var opts = $.extend({
        id:'#box',
        fixedClass:'top-fixed',
        prevClass:'oa-plane',//吸顶元素相邻元素，用来作为参考系，确定浏览器变化时也能够使吸顶元素的位置正确
        offsetLeft:0,//设置吸顶元素距离参考元素左侧的距离
        offsetTop:0,//吸顶后，吸顶元素距离顶部的距离（一般用于上下同时两个元素吸顶，第二个元素要留下第一个吸顶元素的高度）
        startTop:0//设置什么在什么距离时开始吸顶
    },options);
    var fixed = $(opts.id);//获取吸顶目标ID对象
    var marginBottom = parseInt(fixed.css('marginBottom')) || 0;//吸顶目标的下边距
    //var blank = document.createElement('div');//创建空div
    var blank = $('<div></div>');//两种创建空DIV的方式
    var height = parseInt(fixed.outerHeight()+marginBottom-2);//目标元素的高度+下边距
    var scrolltop = $(window).scrollTop();//获取滚动条的滑动距离
    var fixedClass = opts.fixedClass;//获取默认的类名，与$(opts.id)不同，$(opts.id)获取的是对象；opts.fixedClass获取的是名称
    var startTop=opts.startTop;
    var fixedTop=fixed.offset().top-startTop;
    var fixedLeft=fixed.offset().left;
    var prevClass=opts.prevClass;
    var offsetLeft=opts.offsetLeft;
    var offsetTop=opts.offsetTop;
    fixed.after(blank);//在吸顶目标外面的后面加空DIV
    $(blank).css({
        "height":height//空DIV的高度=目标ID元素的高度+下边距
    }).hide();//将空DIV隐藏，即正常时不显示
    function _show(){
        var prevLeft3=$('.'+prevClass).offset().left+offsetLeft+'px';
        var prevTop3=offsetTop+'px';
        fixed.css('left',prevLeft3);
        fixed.css('top',prevTop3);
        if(scrolltop>fixedTop){//滚动条滚过的长度大于吸顶元素距离top的长度。47怎么得到的？
            fixed.addClass(fixedClass);//目标吸顶元素增加类：fixedClass，该类在common.less中做了定义
            $(blank).show();//显示出空DIV,由于position的缘故，空div相当于占位符，放在了吸顶目标的下面。
        }else{
            fixed.removeClass(fixedClass);
            $(blank).hide();
        }
        $(window).resize(function() {
            var prevLeft2=$('.'+prevClass).offset().left+offsetLeft+'px';
            var prevTop2=offsetTop+'px';
            fixed.css('left',prevLeft2); 
            fixed.css('top',prevTop2); 
        });
    }
    this.init = function(){
        _show();
        $(window).scroll(function(){
            scrolltop = $(window).scrollTop(); 
            _show();
        });
    }

}

调用方式：

require('./topfixed.js')
    new Topfixed({
        id:'#topFixed'
    }).init();
    new Topfixed({
        id:'#topFixed2',
        fixedClass:'fixed-box',
        prevClass:'oa-s',
        offsetLeft:930
    }).init();
    new Topfixed({
        id:'#topFixed3',
        fixedClass:'fixed-box-3',
        startTop:74,
        offsetTop:74
    }).init();

效果如下：

蓝色导航区域在吸顶时要和筛选条件一起吸顶，所以距离上端为筛选条件的高度时发生吸顶。

修改完善：增加了判断吸顶元素是否需要设置空div来作为占位符的选择：（参数是flag，当flag=true时增加空div作为占位符；当flag=false时不需要设置空div作为占位符）

function Topfixed(options){
    var opts = $.extend({
        id:'#box',
        fixedClass:'top-fixed',
        prevClass:'oa-plane',//吸顶元素相邻元素，用来作为参考系，确定浏览器变化时也能够使吸顶元素的位置正确
        offsetLeft:0,//设置吸顶元素距离参考元素左侧的距离
        offsetTop:0,//吸顶后，吸顶元素距离顶部的距离（一般用于上下同时两个元素吸顶，第二个元素要留下第一个吸顶元素的高度）
        startTop:0,//设置什么在什么距离时开始吸顶
        flag:true//如果要吸顶的元素下面有内容，则flag为true，增加空div来作为占位符，如果吸顶元素下面没有内容，则不需要使用占位符，则flag为false
    },options);
    var fixed = $(opts.id);//获取吸顶目标ID对象
    var marginBottom = parseInt(fixed.css('marginBottom')) || 0;//吸顶目标的下边距
    //var blank = document.createElement('div');//创建空div
    var blank = $('<div></div>');//两种创建空DIV的方式
    var height = parseInt(fixed.outerHeight()+marginBottom-2);//目标元素的高度+下边距
    var scrolltop = $(window).scrollTop();//获取滚动条的滑动距离
    var fixedClass = opts.fixedClass;//获取默认的类名，与$(opts.id)不同，$(opts.id)获取的是对象；opts.fixedClass获取的是名称
    var startTop=opts.startTop;
    var fixedTop=fixed.offset().top-startTop;
    var fixedLeft=fixed.offset().left;
    var prevClass=opts.prevClass;
    var offsetLeft=opts.offsetLeft;
    var offsetTop=opts.offsetTop;
    var flag=opts.flag;
    if(flag){
        fixed.after(blank);//在吸顶目标外面的后面加空DIV
    }
    $(blank).css({
        "height":height//空DIV的高度=目标ID元素的高度+下边距
    }).hide();//将空DIV隐藏，即正常时不显示
    function _show(){
        var prevLeft3=$('.'+prevClass).offset().left+offsetLeft+'px';
        var prevTop3=offsetTop+'px';
        fixed.css('left',prevLeft3);
        fixed.css('top',prevTop3);
        if(scrolltop>fixedTop){//滚动条滚过的长度大于吸顶元素距离top的长度。47怎么得到的？
            fixed.addClass(fixedClass);//目标吸顶元素增加类：fixedClass，该类在common.less中做了定义
            $(blank).show();//显示出空DIV,由于position的缘故，空div相当于占位符，放在了吸顶目标的下面。
        }else{
            fixed.removeClass(fixedClass);
            $(blank).hide();
        }
        $(window).resize(function() {
            var prevLeft2=$('.'+prevClass).offset().left+offsetLeft+'px';
            var prevTop2=offsetTop+'px';
            fixed.css('left',prevLeft2); 
            fixed.css('top',prevTop2); 
        });
    }
    this.init = function(){
        _show();
        $(window).scroll(function(){
            scrolltop = $(window).scrollTop(); 
            _show();
        });
    }

}

转载于:https://www.cnblogs.com/xiaozhumaopao/p/5818732.html

weixin_34143774

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
吸顶效果插件

function Topfixed(options){ var opts = $.extend({ id:'#topFixed', fixedClass:'top-fixed' },options); var fixed = $(opts.id);//获取吸顶目标ID对象 var marginBottom = pa...
复制链接

扫一扫