Disable Javascript function when browser is non-desktop

Question

Given a script that makes the sidebar sticky when the user scrolls to a certain point (on desktop), this currently creates an issue where the footer doesn't show at the bottom on mobile/tablet devices, but gives the footer an infinitely scrollable blank space. How can I target the script to only work on desktop browsers?

I've tried targeting the desktop with a variation of navigator.userAgent.match == "", but this is disabling the functionality.

When the user is coming from a mobile/tablet, the footer should just show up on the page at the bottom as if the javascript function wasn't loaded.

$(function() {
  var $sidebar = $(".related-articles"),
    $window = $(window),
    offset = $sidebar.offset(),
    topPadding = 15;

  $window.scroll(function() {
    if ($window.scrollTop() > offset.top) {
      $sidebar.stop().animate({
        marginTop: $window.scrollTop() - offset.top + topPadding
      }, 1);
    } else {
      $sidebar.stop().animate({
        marginTop: 0
      }, 1);
    }
  });
});

UPDATE: adding $(window).width() > 767 && to the first if(); statement fixed the issue.

It sounds like you're trying to fix the wrong problem, which is "why does the footer get infinitely scrollable blank space on smaller devices?". — Ian Kemp - SO dead by AI greed
– Ian Kemp - SO dead by AI greed, Commented Mar 23, 2016 at 14:19
if(window.innerWidth > 640) should exclude most mobile devices. — Someone
– Someone, Commented Mar 23, 2016 at 14:21
@IanKemp, that is another issues I'm having. When using device switcher in Chrome, the footer becomes infinitely scrollable when switching to mobile device, unless you refresh the page. Any ideas on how to avoid that? — user3438917
– user3438917, Commented Mar 24, 2016 at 13:22

Jacob Morris · Accepted Answer · 2016-03-23 14:21:51Z

2

I think you're looking for something like this:

if ( $(window).width() > 739) {     
 //Code here for any desktop
}
else {
   //Code here for mobile
}

You can find device width sizes here:

http://mydevice.io/devices/

answered Mar 23, 2016 at 14:21

Jacob Morris

5001 gold badge6 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Disable Javascript function when browser is non-desktop

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related