1

I have a jquery funciton which sticks the navbar to the top of the webpage, but I only want this feature in desktop and tablet mode (not in phone mode). How do I de-activate this function?

$(document).scroll(function(){
    var elem = $('.navbar');
    if (!elem.attr('data-top')) {
        if (elem.hasClass('navbar-fixed-top'))
            return;
        var offset = elem.offset()
        elem.attr('data-top', offset.top);
    }
    if (elem.attr('data-top')  <= $(this).scrollTop() )
        elem.addClass('navbar-fixed-top');
    else
        elem.removeClass('navbar-fixed-top');
 });
user2441391
  • 339
  • 1
  • 4
  • 15
  • http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-handheld-device-in-jquery – Chad Jul 17 '13 at 15:10
  • 1
    You should probably base it off of screen resolution as opposed to device/OS/browser detection, as that is likely the *actual* reason you don't want to pin the navbar to the top of the webpage, yes? – ajp15243 Jul 17 '13 at 15:14
  • Use media queries with the classes that make it fixed to top so that when not over a certain resolution, the fixed top doesn't do anything. – Kevin B Jul 17 '13 at 15:15

3 Answers3

2

Use CSS media queries to manipulate the nav bar. Browser/OS detection shouldn't factor into styling, just resolution and media type.

What is the syntax for a CSS media query that applies to more than one property (AND operator)?

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Community
  • 1
  • 1
Louis Ricci
  • 19,594
  • 5
  • 43
  • 60
1

Based on your question, it seems like the real concern here is saving screen real estate on a mobile device. So as most of the other users have pointed out, you can rely on using media queries here instead. In order to make sure the listener isn't even attached in case of small screens, you can use Modernizr.mq to test a media query and use the returned value:

if( Modernizr.mq('only screen and (min-height: 640px)') ) {
  // Case specific code here, only executed if screen height is > 640px
}

This is assuming you're willing to add Modernizr or are already using it. If you don't have it already included and only plan on using this single test, you can download a custom build(2kB) from modernizr.com which only includes the media query test.

godfrzero
  • 2,170
  • 1
  • 23
  • 30
0

Check this out -- It maybe what you're looking for they're Open source mobile phone detection

http://detectmobilebrowsers.com/

Banning
  • 2,183
  • 2
  • 15
  • 19