Question

我正在使用jQuery脚本＆＃34;向上滚动菜单＆＃34;大卫辛普森，（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 );

使用fadeIn / fadeOut向上滚动菜单

1 个答案: