如何實現在WordPress上滾動更改的Vogue風格的粘貼日期？

-1

我是Vogue網站的崇拜者，我正在尋求實施我在其網站上找到的特定元素。如果你去下面的鏈接：如何實現在WordPress上滾動更改的Vogue風格的粘貼日期？

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

當你向下滾動，日支到頁面的頂部。這很多我相信我知道如何取消，但他們也做的是使日期變化，對應於您滾動傳遞的第一篇文章的日期。

我很好奇，這是如何完成的？大概有某種錨點或觸發器？

我試圖在WordPress中實現這一點（只是爲了使事情複雜化：P）。

如果任何人都可以指出我正確的方向，我會非常感激。

來源

2013-08-02 desirevo

，如果你檢查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; 
}

來源

2013-08-02 15:23:27

提問者也想知道「日期」部分是如何工作的... –

Twitter的引導的JavaScript庫包含類似的所謂「詞綴」東西。

它將nav元素粘貼到窗口頂部並將當前按鈕更改爲當前內容。 Vogue Date Sticky使用相同的原則。

看一看在這裏：
http://getbootstrap.com/javascript/#affix

而且還檢查了在GitHub上源：
https://github.com/twbs/bootstrap/blob/3.0.0-wip/js/affix.js

縱觀時尚網站的源，所有使用的是：

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

＆hellip;以及一些JS（位於here），它抓住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就擅長這一點。

就是這樣:-)

編碼愉快。

來源

2013-08-02 15:25:07

感謝您的回答，夥計們。你特別是馬庫斯，這是非常豐富的。我已經設法實現了詞綴部分，但是有沒有人對我如何在WordPress中實現日期部分有任何想法？ – desirevo

由於您正在使用WordPress，我假設您想在帖子/文章概述列表中顯示不同的日期。嘗試按照日期順序對獲取的數據進行分組，並將包含日期的h2標籤放在每個組的上方。因此，將列表分成div容器，每個容器都有自己的日期。在上面放一個h2標籤。試一試。 **還可以看看WordPress文檔：** [創建存檔索引]（http://codex.wordpress.org/Creating_an_Archive_Index），[The Loop]（http://codex.wordpress.org/The_Loop），[鏈接帖子頁面和類別]（http://codex.wordpress.org/Linking_Posts_Pages_and_Categories）。 –

如何實現在WordPress上滾動更改的Vogue風格的粘貼日期？

回答

相關問題