JavaScript IF功能可识别移动设备

Question

我目前正在创建一个网站，其中有一个固定的固定标头。 该网站建立在Bootstrap之上，但是由于我并不真正喜欢很多Bootstrap标头，因此我决定自己制作一个简单的标头。

http://quarndoncurtaindesign.besaba.com/

粘性标头可以很好地解决一些小问题。 但是，在移动设备上则完全不同。 由于显然标头在垂直方向上会占用大量空间，因此它在移动设备上会占用太多空间。

我决定最好将菜单保持在粘性状态，但是我正在使用此Javascript在某些元素上添加“粘性”类，以便可以在CSS中定位它。

   $(window).scroll(function() {
if ($(this).scrollTop() > 1){  
    $('header').addClass("sticky");
    $('header h1').addClass("sticky");
    $('p#tagline').addClass("sticky");
    $('ul').addClass("sticky");
    $('a').addClass("sticky");
    $('#top').addClass("sticky");
  }
  else{
    $('header').removeClass("sticky");
    $('header h1').removeClass("sticky");
    $('p#tagline').removeClass("sticky");
    $('ul').removeClass("sticky");
    $('a').removeClass("sticky");
    $('#top').removeClass("sticky");
  }
});

任何指向我正确方向的建议将不胜感激。

Answer 1

像这样使用JS是一个好习惯。 通过将类添加到元素，您可以使用CSS定位元素。

但是，您的方法存在两个问题。

您只需要将“ sticky”类应用于标题。 我看不出您为什么需要将sticky类应用于页面上的任何其他元素的任何原因。

这样的事情应该可以解决问题：

header.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1;
}
body {
    padding-top: 100px /* Height of header.*/
                       /*This will offset the content below the header */
}

另外，我认为您甚至不需要在这里使用JS if语句，因为标头始终是粘性的。

如果您在使用移动视图时遇到问题，则应使用媒体查询来更正标题下方内容的偏移量

Answer 2

在这种情况下，您可以从CSS媒体查询中获得比JS代码更多的价值。 它们将使您能够通过屏幕尺寸来识别设备，并为不同的设置指定不同的布局。

Answer 3

我同意前两个答案，这是最适合CSS和/或CSS媒体查询的用例。

但是，如果您仍然希望检测用户是否在使用JavaScript的移动设备上，则可以使用以下代码（或以下代码的变体）：

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 // some code..
}

^此代码段摘自https://stackoverflow.com/a/3540295/1525109