javascript - 尝试在滚动条和Windows尺寸上隐藏徽标

我是编码的新手，正在尝试为我的导航获取一个功能以隐藏徽标并固定在顶部，但无法使此代码正常工作。

function rekotex() {

  //Do something under 767 px.
  if (window.matchMedia) {
    if(window.matchMedia("all and (max-width: 767px)").matches) {

        // Hide logo.
        jQuery("#logo-in-menu").hide();
    }

 } else { // Over 768px.

    // See if page is scrolled, if so hide Logo.
    var height = jQuery(window).scrollTop();

    if(height <= 1){
        jQuery("#logo-in-menu").show();
        jQuery(".header").css({"height":230});
    }

    else if(height > 1) {
        jQuery("#logo-in-menu").hide();
        jQuery(".header").css({"height":130});
    }

}

var doit;
    window.onresize = function(){
        clearTimeout(doit);
        doit = setTimeout(rekotex, 100);
    };
}

最佳答案

如果要检查用户是否正在滚动页面，则应使用$(window).scroll(function(event)，我认为您想要的是:

$( document ).ready(function() {
    if(window.matchMedia("all and (max-width: 767px)").matches) {
        //Do something under 767 px.
        // Hide logo.
        jQuery("#logo-in-menu").hide();
    } else {// Over 768px.
    function rekotex() {
    // See if page is scrolled, if so hide Logo.
    var height = jQuery(window).scrollTop();

    if(height <= 1){
        jQuery("#logo-in-menu").show();
        jQuery(".header").css({"height":230});
    }

    else if(height > 1) {
        jQuery("#logo-in-menu").hide();
        jQuery(".header").css({"height":130});
    }

}


var doit;
    $(window).scroll(function (event) {
        clearTimeout(doit);
        doit = setTimeout(rekotex, 100);
    });
}
});

页面加载时，检查宽度是否小于768，如果是，则隐藏徽标，否则声明功能并在用户滚动时隐藏徽标

同样这只是预感，但是setTimeout是否应该是淡出动画？如果是这样，您应该将时间写在.hide()中。