首页 > 代码库 > fixed水平滚动
fixed水平滚动
直接贴代码如下。
HTML代码:
<div class="wrap"> <div class="container" id="container"> <div class="count" id="count"></div> </div> </div>
CSS代码:
.wrap { width: 1366px; height: 900px; } .container { width: 900px; height: 100%; margin: 0 auto; background-color: pink; } .count { width: 600px; height: 20px; background-color: red; position: fixed; bottom: 0; left: 0; }
js代码:
(function($){ $.ScrollFixed = function(el, options){ var base = this; base.$el = $(el); base.el = el; var target = base.$el;
// -------------- console.log(‘options=‘, options); var parentId = options.parentEl; var leftPos = $(parentId).offset().left + options.offsetLeft + ‘px‘; $(target).css(‘left‘, leftPos); // +++++++++++++++ var original_left = parseInt(target.css(‘left‘)); var original_right = parseInt(target.css(‘right‘)); var _fix_position = function(){ if(base.options.fixed == ‘right‘){ target.css(‘right‘, ($(window).scrollLeft() + $(window).width() - $(document).width() + original_right) + ‘px‘); } else if(base.options.fixed == ‘left‘){ target.css(‘left‘, (original_left - $(window).scrollLeft()) + ‘px‘); console.log(original_left); } }; var windowResize = function(){ _fix_position(); }; var windowScroll = function(){ _fix_position(); }; base.init = function(){ base.options = $.extend({}, $.ScrollFixed.defaultOptions, options); $(window).resize(windowResize); $(window).scroll(windowScroll); _fix_position(); // console.log(base.options.fixed); }; base.init(); }; $.ScrollFixed.defaultOptions = { fixed:‘left‘ }; $.fn.scrollFixed = function(options){ return this.each(function(){ (new $.ScrollFixed(this, options)); }); }; })(jQuery);
用法:
$(‘#count‘).scrollFixed({fixed:‘left‘, parentEl: ‘#container‘, offsetLeft: 20});
说明:
三个参数:其中‘#count’为fixed内容,‘#container’为其祖级(或父级),该用法示例中‘20’为‘#count’相对‘#container’的left值。
fixed:‘left‘为默认项,也可以设置为fixed:‘right‘,具体操作需要根据需求作部分修改。
fixed水平滚动
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。