jQuery - Specific instruction on mobile

Question

I am a jQuery beginner and I need some help. I've built a script that make a sticky element on my page when you scroll :

jQuery(document).ready(function () {  
var top = jQuery('#card').offset().top;
jQuery(window).scroll(function (event) {
var y = jQuery(this).scrollTop();
if (y >= top)
    jQuery('#card').addClass('fixed'),
    jQuery('#card').removeClass('fl-row-fixed-width'),
else
    jQuery('#card').removeClass('fixed'),
    jQuery('#card').addClass('fl-row-fixed-width');
    jQuery('#card').width(jQuery('#card').parent().width());
});
});

It works well.

Now, on mobile, I'd like to add extra instructions such as :

jQuery("#logo").remove()

However, I don't know where to input this and how in my function...

so you want to know how to detect your web app is open from a mobile or desktop?? — Atanu, Nov 02 '18 at 13:30
I just want to have specific instructions when the screen width is < XXX px like when using css media queries. — Fabien, Nov 02 '18 at 13:31
use https://stackoverflow.com/a/3540295/5581578 answe inside your jQuery(document).ready(function () { }) it will work fine — Atanu, Nov 02 '18 at 13:34
It seems I should use matchMedia but I don't know how to put it in my function — Fabien, Nov 02 '18 at 13:34

score 1 · Accepted Answer · answered Nov 02 '18 at 13:38

Your code may look like this

jQuery(document).ready(function () {  
var top = jQuery('#card').offset().top;
jQuery(window).scroll(function (event) {
var y = jQuery(this).scrollTop();
if (y >= top)
    jQuery('#card').addClass('fixed'),
    jQuery('#card').removeClass('fl-row-fixed-width'),
else
    jQuery('#card').removeClass('fixed'),
    jQuery('#card').addClass('fl-row-fixed-width');
    jQuery('#card').width(jQuery('#card').parent().width());
});
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    // do what you want to do in mobile device
    jQuery("#logo").remove()
}
});

jQuery - Specific instruction on mobile

1 Answers1