-1

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

Muhammad Umair Ghaznavi
  • 1
  • 1
  • Welcome to SO. Please read [How to ask a good question](https://stackoverflow.com/help/how-to-ask). In particular, you're expected to show an effort and include code in the question – Mitya Jun 15 '20 at 14:18

3 Answers3

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;
    }
}
ToMatt
  • 33
  • 7
  • This is not worked. I've tried, and again I did, but nothing changes everything scrolls – Muhammad Umair Ghaznavi Jun 15 '20 at 15:39
  • 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. – ToMatt Jun 15 '20 at 18:21
0

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?

Hatzen
  • 314
  • 5
  • 14
  • 1
    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. – Martin Jun 15 '20 at 14:40
0

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
  } 
}
CodeBug
  • 1,156
  • 1
  • 5
  • 18