jQuery navbar effect only on desktop

Question

I have this code:

jQuery(document).ready(function($){
    $('.navbar').css("background-color", "transparent");
    $(window).scroll(function(){
        if ($(this).scrollTop() > 600) {
            $('.navbar').css("background-color", 
            "rgba(255,255,255,0.9)").css("transition","0.3s ease-in-out ");
            $('.navbar a').css("color", "black");
        } 
        else {
            $('.navbar').css("background-color", 
            "transparent").css("transition","0.3s ease-in-out ");
            $('.navbar a').css("color", "white");
        }
    });
});

and I could use some help with what code do I need to add for this code to run only on desktops (width min. 992px). I don't want this effect on mobile or tablet so I will appreciate any of your ideas!

Thank you!

possible duplicate of (https://stackoverflow.com/questions/25542814/html5-detecting-if-youre-on-mobile-or-pc-with-javascript) — Ryan Wilson, Mar 07 '18 at 18:10
Possible duplicate of [Do something if screen width is less than 960 px](https://stackoverflow.com/questions/7715124/do-something-if-screen-width-is-less-than-960-px) — deblocker, Mar 07 '18 at 21:01

score 0 · Answer 1 · answered Mar 07 '18 at 22:46

If you define a desktop as having a screen with a resolution of over 992, then this would work. If you want to use user-agent to detect type of device, that's possible as well (and, arguably, more accurate). But give you are doing this only for styling, it shouldn't matter if your application is technically correct.

I'd recommend that you run this code or a version of it in the resize function, that way it is responsive to changing sizes of the browser's width.

$(document).ready(function($){
    $(document.body).resize(function () {
      var isDesktop = $(document).width() > 992;
      if (isDesktop) {
        $('.navbar').css("background-color", "transparent");
        $(window).scroll(function(){
            if ($(this).scrollTop() > 600) {
                $('.navbar').css("background-color", 
                "rgba(255,255,255,0.9)").css("transition","0.3s ease-in-out ");
                $('.navbar a').css("color", "black");
            } 
            else {
                $('.navbar').css("background-color", 
                "transparent").css("transition","0.3s ease-in-out ");
                $('.navbar a').css("color", "white");
            }
        });
      }
    }).resize();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

jQuery navbar effect only on desktop

1 Answers1