jQuery 删除一个类

Question

当发现 is-sticky 时，我可以成功地将 whatever-class 添加到 .logo div，但是我似乎无法删除它当它被移除回到它的 sticky-wrapper 状态时为什么？。

代码:

jQuery(document).ready(function( $ ) {
  if( $('#header-sticky-wrapper').hasClass('.is-sticky') ){
     $('.logo').addClass('whatever-class');
  }

  if( $('#header-sticky-wrapper').hasClass('sticky-wrapper')) {
    $('.logo').removeClass('whatever-class');
  }
}

插件代码:

  (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);

Answer 1

每当 $('#header-sticky-wrapper') 更改其 class 属性时，不会自动调用您的代码。每次修改它都必须手动调用它。

(function($){
    $(document).ready(updateClasses);

    function updateClasses(){
        if( $('#header-sticky-wrapper').hasClass('is-sticky') ){
            $('.logo').addClass('whatever-class');
        }

        if( $('#header-sticky-wrapper').hasClass('sticky-wrapper')) {
            $('.logo').removeClass('whatever-class');
        }
    }

    window.onscroll = function() {
        var wrapper = $('#header-sticky-wrapper');
        if (window.scrollTop > 100 ) {
            wrapper.addClass('is-sticky');
            wrapper.removeClass('sticky-wrapper');
        } else {
            wrapper.removeClass('is-sticky');
            wrapper.addClass('sticky-wrapper');
        }

        // Changed the classes, call my function that fixes the other classes
        // You'd have to call it from anywhere else you modify that node's classes
        updateClasses()
    }
})(jQuery);