0

I have this function in my < head > which puts a 'shrink' class onto 'header' class when scrolled 100px. 

$(function(){
 var shrinkHeader = 100;
$(window).scroll(function() {
var scroll = getCurrentScroll();
  if ( scroll >= shrinkHeader ) {
       $('header').addClass('shrink');
    }
    else {
        $('header').removeClass('shrink');
    }
});

I want it not to work when the screen is mobile screen size. But I'm not sure how to adjust it for that.

EDIT - Looking for a responsive option (screen size shrinks/grows)

user3550879
  • 3,389
  • 6
  • 33
  • 62

4 Answers4

1

Mohammad's answer should have worked, but doesn't anticipate changes in screen size. I would suggest this:

$(function(){
    var shrinkHeader = 100;
    var hasClass = $('header').hasClass('shrink');

    $(window).scroll(function() {
        if (window.innerWidth > 700) {
            var scroll = document.body.scrollTop;

            if ( scroll >= shrinkHeader ) {
                if (!hasClass) {
                  $('header').addClass('shrink');
                  hasClass = true;
                }
            } else {
                if (hasClass) {
                    $('header').removeClass('shrink');
                    hasClass = false;
                }
            }
        } else {
            if (hasClass) {
                $('header').removeClass('shrink');
                hasClass = false;
            }
        }
    });
});

It keeps track if the class has been added or not to be more efficient (and so that it can be removed if the window is resized so that it's within the mobile threshold). Be careful of doing unnecessary work onScroll.

I hope you ignore the answers that suggested using userAgent, that's a terrible way to determine if the screen is large enough.

Jack
  • 9,448
  • 3
  • 29
  • 33
  • I tried using your code but it doesn't add the shrink class at all, similar to the other answer – user3550879 Jan 07 '16 at 01:17
  • I want it to work the way I have it on screens > 768px. but you have the right idea that It probably needs a listener of somekind. Not sure why your code doesn't work – user3550879 Jan 07 '16 at 01:28
  • Sorry, I used `window.innerWidth < 700` instead of `window.innerWidth > 700`. Edited my answer. – Jack Jan 07 '16 at 07:38
0

You can do this by restricting the function to desktop resolutions ( ex. > 1200px or > 1050px ) only.

$(function(){

    if ($(window).width() > 1200) {
        var shrinkHeader = 100;

        $(window).scroll(function() {
            var scroll = getCurrentScroll();

            if ( scroll >= shrinkHeader ) {
                $('header').addClass('shrink');
            } else {
                $('header').removeClass('shrink');
            }
        });
    }
});
Mohammad Batroukh
  • 41
  • 2
-1

You can detect manually if you are on mobile browser. Wrap you code with (it will only be ran on not mobile browsers):

if(! /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 // your code
}
Mitja Kramberger
  • 272
  • 1
  • 4
-1

You could use the solution provided here to end up with something like that:

function isMobile() {
    var check = false;
    (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
    return check;
}
if (isMobile()) {
    $(function(){
        var shrinkHeader = 100;
        $(window).scroll(function() {
            var scroll = getCurrentScroll();
            if ( scroll >= shrinkHeader ) {
                $('header').addClass('shrink');
            } else {
                $('header').removeClass('shrink');
            }
        });
    });
}
Community
  • 1
  • 1
Pascal Boutin
  • 1,220
  • 2
  • 9
  • 22