Question

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

演示：jsfiddle.net/cc48t /

HTML：

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

SCRIPT：

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

仅当浏览器比移动断点更宽时滚动时才将对象固定到浏览器窗口的顶部

1 个答案: