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

【问题标题】：Fix object to top of browser window when scrolling only when browser is wider than mobile breakpoint仅当浏览器比移动断点宽时滚动时将对象修复到浏览器窗口顶部
【发布时间】：2012-12-05 05:38:37
【问题描述】：

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

在这里演示：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 顶部栏只在某个宽度断点处固定，然后返回页面顶部。

任何帮助将不胜感激。

谢谢！

【问题讨论】：

只要求文档宽度，并应用相应的效果...？
谢谢，您能否演示应用此脚本需要添加哪些脚本？我对 jquery 不是很好，非常感谢进一步的指导。谢谢！

标签： jquery facebook html fixed floating

【解决方案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
 } ;

【讨论】：