jquery - 如何在 WordPress 中实现随滚动而变化的 Vogue 风格的附加日期？

Question

我是 Vogue 网站的崇拜者，我希望实现我在他们的网站上找到的特定元素。如果您转到以下链接：

http://www.vogue.co.uk/news

向下滚动时，日期会显示在页面顶部。我相信我知道如何实现这一点，但他们也会更改日期，对应于您滚动通过的第一篇文章的日期。

我很好奇，这是怎么做到的？大概有某种锚或触发器？

我正在尝试在 WordPress 中实现这一点（只是为了使事情复杂化：P）。

如果有人能指出我正确的方向，我将不胜感激。

Answer 1

Twitter Bootstrap 的 JavaScript Lib 包含类似的东西，叫做“Affix”。

它将导航元素粘贴到窗口顶部并将当前按钮更改为当前内容。Vogue Date Sticky 采用了相同的原理。

看看这里： http:
//getbootstrap.com/javascript/#affix

并查看 GitHub 上的源代码：
https ://github.com/twbs/bootstrap/blob/3.0.0-wip/js/affix.js

 
查看 Vogue Site 的来源，使用的只是：

<h2 data-bind="html: GroupName" class="fixed" style="top: 50px; width: 1077px;">Thursday 1<sup>st</sup> August</h2>

…连同一些 JS（位于此处），它们抓取 h2 标头并将它们固定到该像素半径的顶部“onscroll”。

 
因此，例如：

一开始的 h2 看起来像这样：

<h2 data-bind="html: GroupName">Thursday 1<sup>st</sup> August</h2>

当用户滚动它时，h2 标签将被转换为：

<h2 data-bind="html: GroupName" class="fixed" style="top: 50px; width: 1077px;">Thursday 1<sup>st</sup> August</h2>

请注意，class="fixed"并style="..."添加了属性。在此之前修复的 h2 标签将被重置。如果正确使用选择器（例如var h2_elements = $('h2'); $('.fixed', h2_elements).removeClass('fixed');，或使用类似的东西toggleClass('fixed')），jQuery 在这方面做得很好。

而已 ：-）

 
快乐编码。

Answer 2

如果您检查 css：

侧栏和标题的位置始终是固定的。

.sideBar, .header{
     position : fixed;
}

// 在 Firefox 中你可以注意到

#ContentNavigation {
    bottom: 0;
    left: 44px;
    position: fixed;
    top: 50px;
    transition: left 0.3s ease-out 0s, width 0.3s ease-out 0s;
    z-index: 10001;
}