jquery - 使用 skrollr.js 和调整窗口大小

Question

我有一个网站，其主页由主区域和辅助区域组成，顶部有一个菜单，主区域会根据显示器的宽度和高度自动调整大小：

W = $(window).width();
H = $(window).height();

进而

$("#toparea").css('width', W);
$("#toparea").css("height", H);

事情是我正在使用skrollr.js插件来固定一些元素，我想知道如何使用我已经创建的那些 W 和 H 将这些元素固定在可变位置。

例如，如果浏览器的高度是 860，我应该如何使用 skrollr 插件来检测高度为 860 像素。

<div id="menubar" data-1="top:100%" data-H="top:0%;" >

因此，一旦您滚动了 H 像素，菜单将固定在屏幕顶部。

我该如何编码，以便 skrollr 插件理解 H 的含义？

也许在api中有一些方法可以做到这一点，但到目前为止还没有运气：/

score 0 · Accepted Answer

我不确定我是否明白你想要什么：

听起来像是使用相对锚的一个很好的用例（如果你还没有这样做，你应该使用 skrollr > 0.4）：

<div id="menubar" data-1="top:100%" data-top-top="top:0%;" >

data-top-top表示“当元素的顶部位于视口的顶部时”。由于这些值是预先计算的，因此即使您的元素实际上是绝对定位并且不会移动，它也应该可以工作。

1 回答 1