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

Question

I am new to coding and are trying to get a function for my nav to hide the logo and become fixed at top, but can not make this code to work.

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

If you want to check if the user is scrolling the page you should use $(window).scroll(function (event), I THINK that what you want is this:

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

When the page loads, checks if the width is under 768 and if so, hides the logo, otherwise declares the function and hides the logo if the user scrolls

Also this is just a hunch, but is the setTimeout meant to be a fadeout animation? If so, you should write the time in the .hide().

Answer 2

The easiest way to do this is using jQuery:

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

Answer 3

Solved it with this code.

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