jquery - 仅当浏览器比移动断点宽时滚动时将对象修复到浏览器窗口顶部

Question

我希望采用这种技术在我正在处理的网站上创建浮动/固定导航标题。

在这里演示：jsfiddle.net/cc48t/

HTML：

<div id="scroller">Some controls</div>

脚本：

$(window).scroll(function () {
    if ($(window).scrollTop() > 100) {
        $('#scroller').css('top', $(window).scrollTop());
    }
}
);

CSS：

body {
    height: 3000px;
    top: 0;
    position: relative;
}
#scroller {
    position: relative;
    top: 100px;
    width: 100%;
    background: #CCC;
    height: 100px;
}

我如何才能使这种效果仅适用于宽度较大的浏览器（桌面）并定期显示在较窄的移动设备上。就像 Facebook 顶部栏只固定到某个宽度断点，然后它返回到页面顶部。

任何帮助将不胜感激。

谢谢！

Answer 1

尝试这个

// First get the window Width, in other cases you may want to get the inner but in this case with the outer we're good
var windowWidth = $(window).width();

//Then set the value for large width desktop

var desktopW = 980;

//And wrap your scroll function inside an if statement

if (windowWidth >= desktopW) {
 // your function
 } ;