在隐藏header时将浏览器max-width（媒体查询）添加到javascript？

Question

需要一些帮助*

我想控制我的隐藏 header (javascript) 开始工作的宽度让我们说：宽度为 667px 及以下。是手机看的，我不想用:

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {

因为它不允许我控制一些更大的屏幕尺寸，比如大 tablets/phones。

我看到了 javascript 的一些媒体查询脚本，但无法使其与您在下面看到的代码一起工作：

--> Fiddle

// Hide header on scroll down //

var didScroll;
var lastScrollTop = 0;
var delta = 44;
var navbarHeight = $('header').outerHeight();

$(window).scroll(function(event){
didScroll = true;
});

setInterval(function() {
if (didScroll) {
    hasScrolled();
    didScroll = false;
}
}, 250);

function hasScrolled() {
var st = $(this).scrollTop();

// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
    return;

// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight){
    // Scroll Down
    $('header').addClass('nav-up');
} else {
    // Scroll Up
    if(st + $(window).height() < $(document).height()) {
        $('header').removeClass('nav-up');
    }
}

lastScrollTop = st;
}

Answer 1

如果您唯一的愿望是隐藏您的 header（您的问题对此并不十分清楚），当视口小于 n 像素时，您不需要任何 js。使用简单的 css 媒体查询：

 @media screen and (max-width: 667px) {
     .your-header-class {
         display: none;
     }
 }

但如果您想先使用移动设备，您应该这样做：

/* general + mobile css */
.your-header-class {
     display: none;
}
/* tablet + desktop css only */
@media screen and (min-width: 667px) {
    .your-header-class {
        display: block;
    }
}

否则请查看 this answer 我几天前给的。

我会重新发布代码，并附上一些可能对您有用的评论：

$(window).resize(function() {
    // This will make sure your 'media query' will only run,
    // once your viewport has stopped changing in size
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(breakpointChange(), 400);
});

function breakpointChange() {
    // your window width
    width = window.innerWidth;

    // adapt the values (i.e. 667) here
    if (!mobile && width < 667) {        
        tablet = desktop = false;
        mobile = true;
        // this is mobile, so execute your js here
    }

    if (!tablet && width > 401 && width < 768) {
        mobile = desktop = false;
        tablet = true;
        console.log('is tablet');
    }

    if (!desktop && width > 769) {
        mobile = tablet = false;
        desktop = true;
        console.log('is desktop');
    }
}
// you'll need to call $(window).resize(); the first time your script loads
$(window).resize();

这允许您控制所有媒体断点 - 只需在这两个断点旁边定义您的函数，并在适当的条件内调用它们。

在隐藏header时将浏览器max-width（媒体查询）添加到javascript？

Add browser max-width (media query) to javascript when hide header?

javascript

html

css

media-queries