Custom <head> content only for Desktop - jquery

DET

Hey guys,

thanks to that script i found in that forum, it's now possible to change the color of the navbar from transparent to any color by scrolling.

<script>
    jQuery(document).ready(function(){
      jQuery(window).scroll(function() { // check if scroll event happened
        if (jQuery(document).scrollTop() > 25) { // check if user scrolled more than 50 from top of the browser window
          jQuery(".navbar").css({"background-color": "rgba(66,70,80,1.0)", "backdrop-filter": "saturate(180%) blur(20px)"}); // if yes, then change the color of class "navbar" to white (#ffffff)
        } else {
          jQuery(".navbar").css({"background-color": "transparent", "backdrop-filter": "none"}); // if not, change it back to transparent
        }
      });
    });
</script>

I'm not really into coding, so can anyone of you tell me what i have to add to this script that the jquery only executes for desktop view? atm it also effects the mobile version, resulting into display errors.

Thanks for your help!

Richard

Dear @DET

You need to look this i believe:
https://www.google.com/search?safe=off&sxsrf=ALeKk00KKCVNA9eI2wolNVYQveKOs46AXg%3A1609806246289&ei=prHzX8iWEcXD3LUPorSRwAI&q=if+window+width+jquery&oq=if+window+width+&gs_lcp=CgZwc3ktYWIQAxgAMgoIABDJAxAUEIcCMgQIABBDMgQIABBDMgQIABBDMgIIADIECAAQQzIECAAQQzICCAA6BwgAEEcQsAM6BwgAELADEENQ3QtY3Qtg8RZoAXACeACAAesBiAHrAZIBAzItMZgBAKABAaoBB2d3cy13aXrIAQnAAQE&sclient=psy-ab

https://stackoverflow.com/questions/7715124/do-something-if-screen-width-is-less-than-960-px

The code should only run if Viewport/screen size is above certain Pixel

Hope this helps - Happy 2021 and thank you for using Lay Theme :)

Sincerely
Richard

Lay Theme Forum

Custom <head> content only for Desktop - jquery

Online Users