使用淡入/淡出與向上滾動關於菜單

Question

我使用jQuery腳本「向上滾動菜單」由大衛·辛普森（Github Link），我試圖得到它，以便它使用fadeIn和fadeOut，這樣，當你滾動它淡出，當你向後滾動導航淡出回來。我似乎無法弄清楚在哪裏添加它。在腳本中嚮導航div添加緩動事件（本例中爲#top）還是fadeIn會更好嗎？

JS

;(function ($, window, document, undefined) { 

var pluginName = 'scrollUpMenu'; 
var defaults = { 
     waitTime: 100, 
     transitionTime: 550, 
     menuCss: { 'position': 'fixed', 'top': '0'}, 
     showDelta: 0 
}; 

var lastScrollTop = 0; 
var $header; 
var timer; 
var pixelsFromTheTop; 

// The actual plugin constructor 
function Plugin (element, options) { 
    this.element = element; 
    this.settings = $.extend({}, defaults, options); 
    this._defaults = defaults; 
    this._name = pluginName; 
    this.init(); 
} 

Plugin.prototype = { 
    init: function() { 

     var self = this; 
     $header = $(this.element); 
     $header.css(self.settings.menuCss); 
     pixelsFromTheTop = $header.height(); 

     // $header.next().css({ 'margin-top': pixelsFromTheTop }); 

     $(window).bind('scroll',function() { 
      clearTimeout(timer); 
      timer = setTimeout(function() { 
       self.refresh(self.settings); 
      }, self.settings.waitTime); 
     }); 
    }, 
    refresh: function (settings) { 
     // Stopped scrolling, do stuff... 
     var scrollTop = $(window).scrollTop(); 
     var change = lastScrollTop - scrollTop; 

     if (scrollTop > lastScrollTop && scrollTop > pixelsFromTheTop){ // ensure that the header doesnt disappear too early 
      // downscroll 
      $header.slideUp(settings.transitionTime); 
     } else { 
      // upscroll 
      if (change > settings.showDelta) { 
       $header.slideDown(settings.transitionTime); 
      } 
     } 
     lastScrollTop = scrollTop; 
    } 
}; 

$.fn[ pluginName ] = function (options) { 
    return this.each(function() { 
      if (!$.data(this, 'plugin_' + pluginName)) { 
        $.data(this, 'plugin_' + pluginName, new Plugin(this, options)); 
      } 
    }); 
}; 
})(jQuery, window, document); 

HTML

$(function() {   
     $('#top').scrollUpMenu({'transitionTime': 100}); 
    }); 

的jsfiddle https://jsfiddle.net/09qxdx43/2/

Answer 1

解決了！ fadeIn/fadeOut而不是slideUp

;(function ($, window, document, undefined) { 

    var pluginName = "scrollUpMenu"; 
    var defaults = { 
      waitTime: 20, 
      transitionTime: 300, 
      menuCss: { 'position': 'fixed', 'top': '0'} 
    }; 

    var lastScrollTop = 0;    
    var $header; 
    var timer; 
    var pixelsFromTheTop; 

    // The actual plugin constructor 
    function Plugin (element, options) { 
     this.element = element; 
     this.settings = $.extend({}, defaults, options); 
     this._defaults = defaults; 
     this._name = pluginName; 
     this.init(); 
    } 

    Plugin.prototype = { 
     init: function() { 

      var self = this; 
      $header = $(this.element); 
      $header.css(self.settings.menuCss); 
      pixelsFromTheTop = $header.height(); 

      $header.next().css({ 'margin-top': pixelsFromTheTop }); 

      $(window).bind('scroll',function() { 
       clearTimeout(timer); 
       timer = setTimeout(function() { 
        self.refresh(self.settings) 
       }, self.settings.waitTime); 
      }); 
     }, 
     refresh: function (settings) { 
      // Stopped scrolling, do stuff...       
      var scrollTop = $(window).scrollTop(); 

      if (scrollTop > lastScrollTop && scrollTop > pixelsFromTheTop){ // ensure that the header doesnt disappear too early 
       // downscroll 
       $header.fadeOut(settings.transitionTime); 
      } else { 
       // upscroll 
       $header.fadeIn(settings.transitionTime); 
      } 
      lastScrollTop = scrollTop; 
     } 
    }; 

    $.fn[ pluginName ] = function (options) { 
     return this.each(function() { 
       if (!$.data(this, "plugin_" + pluginName)) { 
         $.data(this, "plugin_" + pluginName, new Plugin(this, options)); 
       } 
     }); 
    }; 

})(jQuery, window, document);