Solution 1 :

There are two things you need to do. First is change the position sticky to the father to work (here doesn’t work like you do). Secondly is using ‘@media (min-width: InsertSizeHere)’ in your css to make work just for desktop, like this:

@media (min-width: 1200px) {
   .sticky-inner-wrapper {
        position: sticky;
        top: 0;
    }
}

Solution 2 :

The solution depends on how you want to detect mobile devices, easy solution could be @media with a specifc Screen resolution an setting Position:fixed if it matches.
A more stable solution would be to determine the user agent and setting the position:fixed via js/jQuery.
Take a look Here:
What is the best way to detect a mobile device?

Solution 3 :

hi you can do this by JS.

if (screen.width >= 411){
 var element = document.getElementById("yourdiv");
 element.classList.add("yourstickyclass");
}

this above JS is working with phone pixel2, Samsung galaxy, iPhone series, and Motorola series.

and here is css method

@media all and (min-width: 1200px) {
  .stickyclass {
   position: -webkit-sticky; /* Safari */
   position: sticky;
   top: 0; //you need sticky at bottom use bottom:0
  } 
}

Problem :

enter image description hereI need to fix/sticky a div in desktop version only. Not in Mobile version. Basically I have an ecommerce website in single product page I want to fix add to cart part sticky and people scroll but that area will not disappear and that part is always scroll by user scrolling you can see images.
You can go by using this link
https://letronne.com/products/example-product?variant=34631988379799

Comments

Comment posted by How to ask a good question

Welcome to SO. Please read

Comment posted by Muhammad Umair Ghaznavi

This is not worked. I’ve tried, and again I did, but nothing changes everything scrolls

Comment posted by ToMatt

Looking again in the site you give, I see the div with class “product-single__meta” have a position fixed in the style, with this you will not need the position sticky. Just the position fixed like is there. Just add the @media in this style and are done.

Comment posted by Martin

Media queries or otherwise methods involving screen res is preferred . UA sniffing is not future safe as new devices are released every now and then and you’d have to constantly update the client recognition.

By