jQuery修改Sticky插件以添加另一个类

我在我的网站上使用下面的插件获得一个粘性标题，我想在div $('.logo').addClass('whatever-class');添加另一个类$('.logo').addClass('whatever-class'); 当is-sticky类被激活时，它不会删除该类。

最好的方法是添加辅助ClassName吗？

码：

 (function($) { var defaults = { topSpacing: 0, bottomSpacing: 0, className: 'is-sticky', wrapperClassName: 'sticky-wrapper', center: false, getWidthFrom: '' }, $window = $(window), $document = $(document), sticked = [], windowHeight = $window.height(), scroller = function() { var scrollTop = $window.scrollTop(), documentHeight = $document.height(), dwh = documentHeight - windowHeight, extra = (scrollTop > dwh) ? dwh - scrollTop : 0; for (var i = 0; i < sticked.length; i++) { var s = sticked[i], //elementTop = s.stickyWrapper.offset().top, elementTop = jQuery('#sticket-scroll-header-point').offset().top, //etse = elementTop - s.topSpacing - extra; etse = elementTop + 250; if (scrollTop <= etse) { if (s.currentTop !== null) { s.stickyElement .css('position', '') .css('top', ''); s.stickyElement.parent().removeClass(s.className); s.currentTop = null; s.stickyElement.removeClass('fadeInDown'); //$('#header.header_v2').css({'position': 'absolute', 'top': 0}); //$('#header.header_v1').css({'position': 'relative'}); } } else { var newTop = documentHeight - s.stickyElement.outerHeight() - s.topSpacing - s.bottomSpacing - scrollTop - extra; if (newTop < 0) { newTop = newTop + s.topSpacing; } else { newTop = s.topSpacing; } if (s.currentTop != newTop) { s.stickyElement.parent().css('height', s.stickyElement.outerHeight()); s.stickyElement .css('position', 'fixed') .css('top', newTop) .css('max-width', s.stickyElement.parent().width()); //$('#header.header_v2').css('position', 'fixed'); if (typeof s.getWidthFrom !== 'undefined') { s.stickyElement.css('width', $(s.getWidthFrom).width()); } s.stickyElement.addClass('fadeInDown'); s.stickyElement.parent().addClass(s.className); s.currentTop = newTop; //$('#header.header_v1, #header.header_v2').css({'position': 'fixed', 'top': -50}); } } } }, resizer = function() { windowHeight = $window.height(); }, methods = { init: function(options) { var o = $.extend(defaults, options); return this.each(function() { var stickyElement = $(this); var stickyId = stickyElement.attr('id'); var wrapper = $('
') .attr('id', stickyId + '-sticky-wrapper') .addClass(o.wrapperClassName); stickyElement.wrapAll(wrapper); if (o.center) { stickyElement.parent().css({width:stickyElement.outerWidth(),marginLeft:"auto",marginRight:"auto"}); } if (stickyElement.css("float") == "right") { stickyElement.css({"float":"none"}).parent().css({"float":"right"}); } var stickyWrapper = stickyElement.parent(); //stickyWrapper.css('height', stickyElement.outerHeight()); //thandhoi sticked.push({ topSpacing: o.topSpacing, bottomSpacing: o.bottomSpacing, stickyElement: stickyElement, currentTop: null, stickyWrapper: stickyWrapper, className: o.className, getWidthFrom: o.getWidthFrom }); }); }, update: scroller }; // should be more efficient than using $window.scroll(scroller) and $window.resize(resizer): if (window.addEventListener) { window.addEventListener('scroll', scroller, false); window.addEventListener('resize', resizer, false); } else if (window.attachEvent) { window.attachEvent('onscroll', scroller); window.attachEvent('onresize', resizer); } $.fn.sticky = function(method) { if (methods[method]) { return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); } else if (typeof method === 'object' || !method ) { return methods.init.apply( this, arguments ); } else { $.error('Method ' + method + ' does not exist on jQuery.sticky'); } }; $(function() { setTimeout(scroller, 0); }); })(jQuery); 

Answer 1

添加的类取自您在配置时传递给扩展的选项 。

在选项中，您可以指定wrapperClassName 。 如果不这样做，则默认为'sticky-wrapper' 。

在该属性中，您甚至可以指定多个类，以空格分隔。 扩展使用$.addClass来添加类，并且该方法接受一个或多个空格分隔的类，因此将{wrapperClassName: 'sticky-wrapper yourownclass'}作为选项传递完全{wrapperClassName: 'sticky-wrapper yourownclass'} 。