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

菜单是固定的，将在滚动后显示。这不适用于触摸设备

我想调用脚本，使用Modernizer，当它检测不到触摸装置时。但我不知道怎么做

另外，我是否需要从Modernizer下载页面中获得一些元素来完成这项工作

这是我的剧本：

$(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'});
    }
});
});

但我不知道怎么做

您不希望只使用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
}

也。相反，您希望在需要时使用requestAnimationFrame匀场，以获得尽可能平滑的动画。有了这些，你就可以做这样的事情了

$(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');
    }
});

另外，我是否需要从Modernizer下载页面中获得一些元素来完成这项工作

只是现代触摸测试

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

我现在有一个来自Patricks answers的帮助，但正如您所见，当您像在我的屏幕上那样滚动时，该条仍然不会到达顶部

有解决办法吗？平板电脑和手机不喜欢有$window.scroll功能的特效

目前我的网站上有此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功能上都有问题，但它在台式电脑上也能正常工作。不过这并不能带来多少安慰

---

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

谢谢你的回复。它现在可以在移动设备上正常工作。但这仅仅是因为现代化与接触事件。在平板电脑/个人电脑上，导航以滚动方式显示，但在固定和平板电脑上显示为90像素。我不能让你的css工作，所以我使用了旧的脚本，没有window.scroll功能-没有这个，导航将坚持保持90像素的顶部，当滚动，而不是你看到的0像素，当你第一次签出我的网站。我想是js。会覆盖css设置，但不会。我真的不知道如何继续。如果css不起作用，请确保在Modernizer构建中包含CSSClass。在scroll上重新分配css对性能是一个巨大的打击。如果它不起作用-使用codepen或JSFIDDLE发布代码演示我一直在查看代码，发现命名中有一个缺陷。固定条不是固定元素。导航是。在这把小提琴里，我改了名字。希望它能澄清一些事情。用这把小提琴：