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 (stackoverflow.com/questions/25542814/…) — Ryan Wilson
– Ryan Wilson, Commented Mar 7, 2018 at 18:10
Possible duplicate of Do something if screen width is less than 960 px — deblocker
– deblocker, Commented Mar 7, 2018 at 21:01

Neil · Accepted Answer · 2018-03-07 22:46:12Z

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>

Collectives™ on Stack Overflow

jQuery navbar effect only on desktop

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related