尝试隐藏滚动和窗口大小上的徽标

Question

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

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，如果是，则隐藏徽标，否则声明该功能并在用户滚动时隐藏徽标

同样，这只是一种预感，但是设置超时是否意味着淡出动画？如果是这样，你应该在 .hide（） 中写下时间。

Answer 2

最简单的方法是使用 jQuery：

       $(document).on( 'scroll', function(){
            $('#image').hide()
       });

Answer 3

用这段代码解决了它。

#CSS
  #logo-in-menu { // Göm i mobil
    display: none !important;
  }
  .header {
    height: 75px !important;
  }
#JS
jQuery(window).scroll(function() {
    var height = jQuery(window).scrollTop();
    if(height <= 1){
       jQuery("#logo-in-menu").show();
       jQuery(".header").css({"height":180});
    }
    else if(height > 1) {
        jQuery("#logo-in-menu").hide();
        jQuery(".header").css({"height":75});
    }
});