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

这也只是一种预感，但是setTimeout意味着是一个淡出动画吗？如果是这样，你应该在.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});
    }
});

试图在滚动和窗口大小上隐藏徽标

3 个答案: