1
我使用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/
你可以把它放在jsfiddle吗? – Chanckjh
** jsfiddle here:** https://jsfiddle.net/09qxdx43/2/ – adamo
我想知道如果我需要将它添加到主页上的功能... – adamo