WordPress에서 스크롤 할 때 보그 스타일이 붙은 날짜를 변경하는 방법은 무엇입니까?

Question

저는 Vogue 웹 사이트에 찬사를 보냅니다. 저는 웹 사이트에서 발견 한 특정 요소를 구현하려고합니다. 다음 링크로 이동하는 경우 :

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

당신이 아래로 스크롤 할 날짜 스틱을 페이지 상단에. 이 정도는 내가 어떻게 해야할지 알고 있지만, 그들이하는 일은 스크롤하는 첫 번째 기사의 날짜에 해당하는 날짜 변경을하는 것입니다.

궁금한 점은 무엇입니까? 아마 앵커 나 방아쇠가 생겨도 될까요?

저는 워드 프레스에서 이것을 달성하려고합니다. (문제를 복잡하게 만드는 것 : P).

누구든지 올바른 방향으로 나를 가리킬 수 있다면, 나는 매우 감사 할 것입니다. 당신이 CSS를 검사하는 경우

Answer 1

: 사이드 바, 헤더

postions는 항상 고정되어 있습니다.

.sideBar, .header{ 
    position : fixed; 
} 

파이어 폭스에서 당신은

#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; 
} 

Answer 2

트위터 부트 스트랩의 자바 스크립트 해방이 "부착"라는 비슷한 포함 알 수 있습니다 //.

nav 요소를 창 위쪽에 붙이고 현재 버튼을 현재 내용으로 변경합니다. 같은 원리가 보그 데이트 스티커에 사용됩니다. ,

 

https://github.com/twbs/bootstrap/blob/3.0.0-wip/js/affix.js

는 보그 사이트의 소스를 보면 : GitHub의에서 소스를 체크 아웃도
http://getbootstrap.com/javascript/#affix

그리고 :

여기에서보세요 사용되는 모든 것은 다음과 같습니다 :

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

& hellip; h2 헤더를 가져 와서 해당 픽셀 반경의 상단 "onscroll"에 고정시키는 일부 JS (위치 here).

 
따라서, 예를 들어 :

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

위에 사용자가 스크롤이 후, 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가 좋습니다.

 
해피 코딩 :-) 그것 뿐이다

.