我在一个网站的一个导航栏中使用affix组件，并希望在较小的屏幕上禁用它。我使用的jquery方法与数据，不能弄清楚如果我的屏幕分辨率小于767px时关闭它。我试图捕获窗口宽度调整大小和滚动，并返回false或删除affix类，但它不真的很好。
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();
}
}
解决方法
你可以像在Bootstrap页面上做的一样，只使用CSS。使用
@media queries检测屏幕大小，如果屏幕低于一定大小，不要将位置设置为固定。例如：
@media (min-width: 768px) {
.affix {
position: fixed;
}
}
此规则只有在屏幕宽度大于768像素时才会有效。
也可以反过来，如果屏幕小于一定大小，将元素的位置显式设置为静态：
@media (max-width: 767px) {
.affix {
position: static;
}
}
