警告:严重缺乏对jquery的理解
我有一个移动菜单,从左侧拉出,打开时我的页面宽度的25%。我的问题是,如果我已经向下滚动页面然后决定打开我的移动菜单,页面将返回到顶部并打开菜单。如何防止页面返回到顶部并保持滚动位置。
我使用的是jquery 插件?
由于
;(function ($, window) {
"use strict";
var namespace = "shifter",
initialized = false,
hasTouched = false,
data = {},
classes = {
handle: "shifter-handle",
page: "shifter-page",
header: "shifter-header",
navigation: "shifter-navigation",
isEnabled: "shifter-enabled",
isOpen: "shifter-open"
},
events = {
click: "touchstart." + namespace + " click." + namespace
};
/**
* @options
* @param maxWidth [string] <'980px'> "Width at which to auto-disable plugin"
*/
var options = {
maxWidth: "980px"
};
var pub = {
/**
* @method
* @name close
* @description Closes navigation if open
* @example $.shifter("close");
*/
close: function() {
if (initialized) {
data.$html.removeClass(classes.isOpen);
data.$body.removeClass(classes.isOpen);
data.$shifts.off( classify(namespace) );
// Close mobile keyboard if open
data.$nav.find("input").trigger("blur");
}
},
/**
* @method
* @name enable
* @description Enables navigation system
* @example $.shifter("enable");
*/
enable: function() {
if (initialized) {
data.$body.addClass(classes.isEnabled);
}
},
/**
* @method
* @name destroy
* @description Removes instance of plugin
* @example $.shifter("destroy");
*/
destroy: function() {
if (initialized) {
data.$html.removeClass(classes.isOpen);
data.$body.removeClass( [classes.isEnabled, classes.isOpen].join(" ") )
.off(events.click);
// Navtive MQ Support
if (window.matchMedia !== undefined) {
data.mediaQuery.removeListener(onRespond);
}
data = {};
initialized = false;
}
},
/**
* @method
* @name disable
* @description Disables navigation system
* @example $.shifter("disable");
*/
disable: function() {
if (initialized) {
pub.close();
data.$body.removeClass(classes.isEnabled);
}
},
/**
* @method
* @name open
* @description Opens navigation if closed
* @example $.shifter("open");
*/
open: function() {
if (initialized) {
data.$html.addClass(classes.isOpen);
data.$body.addClass(classes.isOpen);
data.$shifts.one(events.click, onClick);
}
}
};
/**
* @method private
* @name init
* @description Initializes plugin
* @param opts [object] "Initialization options"
*/
function init(opts) {
if (!initialized) {
data = $.extend({}, options, opts || {});
data.$html = $("html");
data.$body = $("body");
data.$shifts = $( [classify(classes.page), classify(classes.header)].join(", ") );
data.$nav = $( classify(classes.navigation) );
if (data.$shifts.length > 0 && data.$nav.length > 0) {
initialized = true;
data.$body.on(events.click, classify(classes.handle), onClick);
// Navtive MQ Support
if (window.matchMedia !== undefined) {
data.mediaQuery = window.matchMedia("(max-width:" + (data.maxWidth === Infinity ? "100000px" : data.maxWidth) + ")");
data.mediaQuery.addListener(onRespond);
onRespond();
}
}
}
}
/**
* @method private
* @name onRespond
* @description Handles media query match change
*/
function onRespond() {
if (data.mediaQuery.matches) {
pub.enable();
} else {
pub.disable();
}
}
/**
* @method private
* @name onClick
* @description Determines proper click / touch action
* @param e [object] "Event data"
*/
function onClick(e) {
e.preventDefault();
e.stopPropagation();
e.isPropagationStopped();
if (!hasTouched) {
if (data.$body.hasClass(classes.isOpen)) {
pub.close();
} else {
pub.open();
}
}
if (e.type === "touchstart") {
hasTouched = true;
setTimeout(resetTouch, 500);
}
}
/**
* @method private
* @name resetTouch
* @description Resets touch state
*/
function resetTouch() {
hasTouched = false;
}
/**
* @method private
* @name classify
* @description Create class selector from text
* @param text [string] "Text to convert"
* @return [string] "New class name"
*/
function classify(text) {
return "." + text;
}
$[namespace] = function(method) {
if (pub[method]) {
return pub[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return init.apply(this, arguments);
}
return this;
};
})(jQuery,window);