Make sticky work only on desktop version

Question

I've got this sticky code working on one of my divs. I was wondering if it was possible to only work on desktops... I don't want it to be sticky on mobiles or tablets.

var $window = $(window),
   $stickyEl = $('#single_text'),
   elTop = $stickyEl.offset().top;

$window.scroll(function() {
    $stickyEl.toggleClass('sticky', $window.scrollTop() > elTop);
});

@Blazemonger I don't think modernizr tells you if a site is mobile/tablet or not. — matthewpavkov, Nov 05 '13 at 00:29
No, there is no 100% reliable way to tell if you're using a smartphone/tablet or not, partly because the definition is getting blurred -- which would you consider the Microsoft Surface to be? Instead, you need to consider which *features* are important (touchscreen, small screen, Adobe Flash, etc.) and detect those instead. Your question is unanswerable because you haven't defined what you consider a mobile/tablet device to be. — Blazemonger, Nov 05 '13 at 13:57

score 0 · Answer 1 · edited May 23 '17 at 12:13

The logic itself is simple, but accurate detection of mobile/tablet devices is sort of complicated to do these days, given all of the devices, screen sizes, user agents, etc.

Basically, you need to test for mobile/tablet or not, set that to a variable (true/false), then execute your JavaScript if it's not mobile.

var isMobile = false;
if(mobileDetection == true) { // mobileDetection is the missing piece
    isMobile = true;
}

if(!isMobile) {
    // execute desktop-only JS
}

I'd suggest reading over these materials:

Make sticky work only on desktop version

1 Answers1