javascript - 试图在滚动和窗口大小上隐藏 Logo

Question

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

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);
    };
}

Answer 1

如果你想检查用户是否正在滚动你应该使用 $(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，如果是，则隐藏 Logo ，否则声明函数并在用户滚动时隐藏 Logo

这也只是一种预感，但 setTimeout 是否意味着淡出动画？如果是这样，您应该在.hide() 中写入时间。