jQuery Modify Sticky Plugin添加另一个类

本文介绍了jQuery Modify Sticky Plugin添加另一个类的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我使用下面的插件在我的网站上的粘性标题，我想添加另一个类到一个div $（'。logo'）。addClass（'whatever-class'）; 当is-sticky类被激活时，它不是它删除该类。I am using the below plugin for a sticky header on my website and I would like to add another class to a div $('.logo').addClass('whatever-class'); When the is-sticky class is activated and when its not it removes that class.最好的办法是添加一个辅助 ClassName ？ Would the best way be to add a secondary 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 = $('<div></div>') .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); 推荐答案添加的类取自选项，您在配置它时传递给扩展。 The class that is added, is taken from the options that you pass to the extension when configuring it. 在选项中，您可以指定 wrapperClassName 。如果不这样做，它默认为'sticky-wrapper'。In the options you can specify a wrapperClassName. If you don't, it defaults to 'sticky-wrapper'.多个类，用空格分隔。扩展程序使用 $。addClass 添加类，并且该方法接受一个或多个空格分隔的类，因此传递 {wrapperClassName：'sticky-wrapper yourownclass'} 作为选项是非常好的。In that property you can even specify multiple classes, separated by a space. The extension uses $.addClass to add the class, and that method accepts one or more space separated classes, so it's perfectly fine to pass {wrapperClassName: 'sticky-wrapper yourownclass'} as the options. 这篇关于jQuery Modify Sticky Plugin添加另一个类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！