jQuery 如何在较小的屏幕上禁用 Bootstrap 的“词缀”？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17394854/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I disable Bootstrap's "affix" on smaller screens?
提问by Chris
I'm using the affix component in a site for a navbar and would like to disable it on smaller screens. I'm using the jquery method vs. the data and can't figure out how to turn it off when my screen resolution is smaller than 767px. I've tried capturing the window width on resize and scroll and either returning false or removing the affix classes but it doesn't really work well.
我在导航栏的站点中使用词缀组件，并希望在较小的屏幕上禁用它。我正在使用 jquery 方法与数据，当我的屏幕分辨率小于 767px 时，无法弄清楚如何将其关闭。我试过在调整大小和滚动时捕获窗口宽度，并返回 false 或删除词缀类，但它并不能很好地工作。
if($('#subnav').length){
$(window).resize(function() {
var wWidth = $(window).width();
getSize(wWidth);
});
$(window).scroll(function () {
var wWidth = $(window).width();
getSize(wWidth);
});
function getSize(z){
if(z <= 767) {
// I tried doing return false here, no good.
$('#subnav').removeClass('affix').removeClass('affix-top');
$('.nav > li').removeClass('active');
} else {
setNav();
}
}
var wWidth = $(window).width();
getSize(wWidth);
function setNav (){
$('#subnav').affix({
offset: {
top: 420,
bottom: 270
}
});
$('#subnav').scrollspy();
}
}
回答by Felix Kling
You can do it the same way like they do on the Bootstrap page, with CSS alone. Use @media queriesto detect the screen size and don't set the position to fixedif the screen is below a certain size. For example:
你可以像在 Bootstrap 页面上一样，只使用 CSS。使用@media 查询来检测屏幕尺寸，fixed如果屏幕低于特定尺寸，则不要将位置设置为。例如：
@media (min-width: 768px) {
.affix {
position: fixed;
}
}
This rule will only have an effect if the screen width is more than 768px.
此规则仅在屏幕宽度大于 768 像素时有效。
You can also do it vice versa, set the element's position explicitly to staticif the screen has smaller than a certain size:
您也可以反之亦然，static如果屏幕小于特定尺寸，则显式设置元素的位置：
@media (max-width: 767px) {
.affix {
position: static;
}
}
回答by TheRyan722
Correct me if I'm wrong, but try setting if(z <= 767) {to if(z <= 1) {that way it won't re-size? Unless I am missing the point of your question.
如果我错了，请纠正我，但尝试设置if(z <= 767) {为if(z <= 1) {不会重新调整大小的方式？除非我错过了你的问题的重点。
