我正在使用粘性侧边栏插件from this tutorial，但我只希望侧边栏在桌面尺寸屏幕上是粘性的。将媒体查询添加到此代码中的最佳方法是什么，以便仅触发960px +
(function() {
var $, win;
$ = this.jQuery;
win = $(window);
$.fn.stick_in_parent = function(opts) {
var elm, inner_scrolling, offset_top, parent_selector, sticky_class, _fn, _i, _len;
if (opts == null) {
opts = {};
}
sticky_class = opts.sticky_class, inner_scrolling = opts.inner_scrolling, parent_selector = opts.parent, offset_top = opts.offset_top;
if (offset_top == null) {
offset_top = 0;
}
if (parent_selector == null) {
parent_selector = void 0;
}
if (inner_scrolling == null) {
inner_scrolling = true;
}
if (sticky_class == null) {
sticky_class = "is_stuck";
}
_fn = function(elm, padding_bottom, parent_top, parent_height, top, height, float) {
var bottomed, detach, fixed, last_pos, offset, parent, recalc, recalc_and_tick, spacer, tick;
parent = elm.parent();
if (parent_selector != null) {
parent = parent.closest(parent_selector);
}
if (!parent.length) {
throw "failed to find stick parent";
}
fixed = false;
spacer = $("<div />");
recalc = function() {
var border_top, padding_top, restore;
border_top = parseInt(parent.css("border-top-width"), 10);
padding_top = parseInt(parent.css("padding-top"), 10);
padding_bottom = parseInt(parent.css("padding-bottom"), 10);
parent_top = parent.offset().top + border_top + padding_top;
parent_height = parent.height();
restore = fixed ? (fixed = false, elm.insertAfter(spacer).css({
position: "",
top: "",
width: ""
}), spacer.detach(), true) : void 0;
top = elm.offset().top - parseInt(elm.css("margin-top"), 10) - offset_top;
console.log("setting top", top);
height = elm.outerHeight(true);
float = elm.css("float");
spacer.css({
width: elm.outerWidth(true),
height: height,
display: elm.css("display"),
"vertical-align": elm.css("vertical-align"),
float: float
});
if (restore) {
return tick();
}
};
recalc();
if (height === parent_height) {
return;
}
bottomed = false;
last_pos = void 0;
offset = offset_top;
tick = function() {
var css, delta, scroll, will_bottom, win_height;
scroll = win.scrollTop();
if (last_pos != null) {
delta = scroll - last_pos;
}
last_pos = scroll;
if (fixed) {
will_bottom = scroll + height + offset > parent_height + parent_top;
if (bottomed && !will_bottom) {
bottomed = false;
elm.css({
position: "fixed",
bottom: "",
top: offset
}).trigger("sticky_kit:unbottom");
}
if (scroll < top) {
fixed = false;
offset = offset_top;
if (float === "left" || float === "right") {
elm.insertAfter(spacer);
}
spacer.detach();
css = {
position: "",
width: "",
top: ""
};
elm.css(css).removeClass(sticky_class).trigger("sticky_kit:unstick");
}
if (inner_scrolling) {
win_height = win.height();
if (height > win_height) {
if (!bottomed) {
offset -= delta;
offset = Math.max(win_height - height, offset);
offset = Math.min(offset_top, offset);
if (fixed) {
elm.css({
top: offset + "px"
});
}
}
}
}
} else {
if (scroll > top) {
fixed = true;
css = {
position: "fixed",
top: offset
};
css.width = elm.width() + "px";
elm.css(css).addClass(sticky_class).after(spacer);
if (float === "left" || float === "right") {
spacer.append(elm);
}
elm.trigger("sticky_kit:stick");
}
}
if (fixed) {
if (will_bottom == null) {
will_bottom = scroll + height + offset > parent_height + parent_top;
}
if (!bottomed && will_bottom) {
bottomed = true;
if (parent.css("position") === "static") {
parent.css({
position: "relative"
});
}
return elm.css({
position: "absolute",
bottom: padding_bottom,
top: ""
}).trigger("sticky_kit:bottom");
}
}
};
recalc_and_tick = function() {
recalc();
return tick();
};
detach = function() {
win.off("scroll", tick);
$(document.body).off("sticky_kit:recalc", recalc_and_tick);
elm.off("sticky_kit:detach", detach);
elm.css({
position: "",
bottom: "",
top: ""
});
parent.position("position", "");
if (fixed) {
elm.insertAfter(spacer).removeClass(sticky_class);
return spacer.remove();
}
};
win.on("scroll", tick);
win.on("resize", recalc_and_tick);
$(document.body).on("sticky_kit:recalc", recalc_and_tick);
elm.on("sticky_kit:detach", detach);
return setTimeout(tick, 0);
};
for (_i = 0, _len = this.length; _i < _len; _i++) {
elm = this[_i];
_fn($(elm));
}
return this;
};
}).call(this);
答案 0 :(得分：0)
这就是我要做的。
首先看一下Enquire.js。它是一个处理媒体查询的库。
下载时，您可以像这样使用它来调用$("#sticky_item").stick_in_parent()功能。
enquire.register("screen and (min-width: 960px)", {
match : function() {
// This function is called when the max-width is less than or equal to 960px
},
unmatch : function() {
// This function is called when the max-width is greater than 960px
$("#sticky_item").stick_in_parent();
}
});