Custom <head> content only for Desktop - jquery

DET · wrote on Dec 30, 2020, 1:03 AM

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 · Jan 4, 2021, 7:25 PM

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

Before you post:

When you post:

Online Users