吸顶插件

最新推荐文章于 2023-06-21 11:42:54 发布

鱼与雨于语

最新推荐文章于 2023-06-21 11:42:54 发布

阅读量249

点赞数 2

分类专栏： js 文章标签：吸顶

本文链接：https://blog.youkuaiyun.com/sinat_38914900/article/details/88127307

版权

js 专栏收录该内容

16 篇文章

订阅专栏

/**
 * 吸顶
 * 
    $('el').ceilFn({
        className: "fixed_top",
        bottomEle: '.all-type-tag',
        num1: 20,
        num2: 60   
    });
 * 
 */

;(function($){
	
	// 吸顶 js
    $.fn.ceilFn = function(options){

        // 参数
        var defaults = {
            fixedClassName: 'fixed_top',    // 吸顶样式
            absClassName: 'pa',             // 固定定位样式
            bottomEle: '.all-type-tag',     // 底部元素
            num1: 0,                       // 浮动元素有 mt20，num1 就等于 20
            num2: 0                        // 距离底部元素的距离             
        };
        
        var options = $.extend({}, defaults, options);
        return this.each(function(){

            var $my = $(this),
                _fixedClassName = options.fixedClassName,
                  _absClassName = options.absClassName,
                          _num1 = options.num1,
                          _num2 = options.num2,
                      _elHeight = $my.outerHeight(),
                         _elTop = $my.offset().top,
                     $bottomEle = $(options.bottomEle),
                  _bottomEleTop = $bottomEle.offset().top;

            $(window).scroll(function(){
                var _ScrollTop = $(window).scrollTop();
                var _maxTop = _bottomEleTop-_elHeight-_num2;

                // console.log( _elHeight)
                if(_ScrollTop >= _elTop){
                    $my.addClass(_fixedClassName).removeClass(_absClassName).css('top', 0-_num1);
                } 
                else {
                    $my.removeClass(_fixedClassName);
                }
                if(_ScrollTop > _maxTop){
                    $my.removeClass(_fixedClassName).addClass(_absClassName).css('top', _maxTop-_num1);
                };
            });
            
        });

    };
    
})(jQuery)