处理与触摸设备相关的固定位置答案

【问题标题】：Handling fixed position in relation to touch devices处理与触摸设备相关的固定位置
【发布时间】：2014-02-05 18:13:50
【问题描述】：

菜单是固定的，将跟随滚动。这不适用于触摸设备。

我想在检测到非触摸设备时使用 Modernizr 调用脚本。但我不确定如何做到这一点。

另外，Modernizr 下载页面中是否有我需要完成此操作的元素？

这是我的脚本：

$(document).ready(function() {
$(window).scroll(function() {

   var header = $('#fixed-bar').outerHeight(true);
   console.log(header);
   var scrollTopVal = $(this).scrollTop();
    if ( scrollTopVal > header ) {
        $('nav').css({'position':'fixed','top' :'0px', 'border-bottom':'4px solid #ff5454'});
    } else {
        $('nav').css({'position':'absolute','top':'90px', 'border-bottom':'none'});
    }
});
});

【问题讨论】：

标签： scroll touch modernizr

【解决方案1】：

但我不确定该怎么做。

您不想只使用 javascript，您想主要使用 css，并且只需使用 javascript 切换类。它的性能更高（这对于滚动循环之类的东西非常重要）。

#fixed-bar {
  position: fixed;
  top: 0px;
  border-bottom:4px solid #ff5454;
}

.touch #fixed-bar, #fixed-bar.at-top {
    top: 90px;
    border-bottom: none
}

另外，you don't want to directly attach to window.scroll。相反，您想使用 requestAnimationFrame（在需要的地方进行匀场）来获得尽可能流畅的动画。 Here is a coffeescript example for jQUery.有了它，你就会想做这样的事情

$(document).ready(function() {
   // the height doesn't change, so we don't need to look it up on scroll.
   var headerHeight = $('#fixed-bar').outerHeight(true);

   $.request_scroll(function() {
   var scrollTopVal = $(this).scrollTop();
    if ( scrollTopVal > headerHeight ) {
        $('nav').addClass('at-top');
    }
    else {
        $('nav').removeClass('at-top');
    }
});

另外，Modernizr 下载页面中是否有我需要完成此操作的元素？

只是 Modernizr.touch 测试。

请注意，这不会检测触摸屏，只会检测支持触摸事件的设备。这意味着新的 Windows 8 笔记本电脑将被检测为.touch，而 Windows Phone 则不会（它们使用指针事件，而不是触摸事件）。

【讨论】：

感谢您的回复。它现在可以在移动设备上正常运行。但这仅仅是因为 Modernizr 带有触摸事件。在平板电脑/个人电脑上，导航跟随滚动，但顶部：固定和平板电脑上的 90 像素。我无法让你的 css 工作，所以我使用了没有 window.scroll 功能的旧脚本 - 没有这个，导航将在滚动时保持从顶部保持 90px，而不是你第一次签出时看到的 0px我的网站。我还以为是js。会覆盖css设置，但不会。我真的不知道该怎么做。
如果 css 无法正常工作，请确保您在 modernizr 构建中包含 cssclasses。在滚动上重新分配 css 是一个巨大的性能打击。
如果它不起作用 - 使用 codepen 或 jsfiddle 发布代码演示
我一直在查看代码，发现命名中存在缺陷。 #fixed-bar 不是固定元素。导航群岛在这个小提琴http://jsfiddle.net/dbByU/1/ 中，我更改了名称。希望它能澄清一些事情。
使用这个小提琴：http://jsfiddle.net/rr_kwr/rp5MV/

【解决方案2】：

我现在有一个fiddle，在 Patricks 的回答的帮助下，但是正如你所看到的，当你像我的 website 一样滚动时，该栏仍然没有到达顶部。

有解决办法吗？平板和手机不喜欢效果，有 $(window).scroll(function().

目前我的网站上有这个 javascript（id 不同）：

$(document).ready(function() {
$(window).scroll(function() {

var header = $('#fixed-bar').outerHeight(true);
   console.log(header);
//this will calculate header's full height, with borders, margins, paddings
   var scrollTopVal = $(this).scrollTop();
    if ( scrollTopVal > header ) {
        $('nav').css({'position':'fixed','top' :'0px', 'border-bottom':'4px solid #ff5454'});
    } else {
        $('nav').css({'position':'absolute','top':'90px', 'border-bottom':'none'});
    }
});
});

虽然大多数平板电脑都存在 $(window).scroll(function() 的问题，但它可以在台式电脑上运行。不过，这并没有太大的安慰。

有没有其他方法可以让它工作？使用触摸和指针事件，也许有人有一个可行的小提琴 og 示例？

【讨论】：