CODEWITHSUNDEEP
javascriptcssresponsive-designdisplay
Kevin Mamaqi
Kevin Mamaqi

Reputation: 355

Make Visible a display: none with Javascript in Mobile View

I got the following code to fade in a sticky menu when a certain height is arrived and want to make it visible always from mobile view (or even better mobile devices) changing the display: none; to display: block;

The problem appears the first time that the users joins from a device less than 768px wide, the menu doesn't appear until he/she scrolls down.

I'm using the following code:

HTML

<nav id="menufijo" style="display:none;" class="navbar navbar-default navbar-fixed-top">

// Everything that's inside

</nav>

JAVASCRIPT

<script>
        $(window).scroll(function(){
        var y = $(window).scrollTop();
        var z = $(".top-header")
        if(y > z.outerHeight() ){
          $("#menufijo").fadeIn("slow");
         } else if (window.matchMedia("(max-width: 768px)").matches) {
          $("#menufijo").style.display = "block";
        } else {
          $("#menufijo").fadeOut("fast");
        }});
</script>

Upvotes: 1

Views: 2239

Answers (1)

jcubic
jcubic

Reputation: 66518

Try:

$(window).scroll(function(){
    var y = $(window).scrollTop();
    var z = $(".top-header")
    if (!window.matchMedia("(max-width: 768px)").matches) {
        if (y > z.outerHeight() ) {
            $("#menufijo").fadeIn("slow");
        } else {
            $("#menufijo").fadeOut("fast");
        }
    }
});
$(function() {
    if (window.matchMedia("(max-width: 768px)").matches) {
        $("#menufijo").show();
    }
});

Upvotes: 1

Related Questions