Question

菜单已修复，将在滚动后跟随。这对触摸设备不起作用。

我希望在检测到无触摸设备时使用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'});
    }
});
});

Answer 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测试。

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

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

虽然大多数平板电脑都有问题（窗口）.scroll（function（），但它适用于台式机。虽然没有太大的安慰。

是否有另一种方法可以让它发挥作用？使用触摸和指针事件，也许某人有一个工作小提琴示例？

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

2 个答案: