滾動時縮小標題並同步移動內容

Question

我目前正在創建一個個人網站，並且在加載網站時我需要一個完整的高度標題。該標題應該在用戶向下滾動時動畫化其高度，並且標題下方的內容應該同步移動到標題的動畫。頭部應固定在最後。 我得到了一切工作，除了固定的位置。動畫完成時閃爍。

我創建了一個小提琴，所以你會明白我的意思更簡單。

http://jsfiddle.net/30j5njrw/10/`

提前感謝所有幫助

問候

編輯： 我試過幾件事情，到目前爲止，像加從一開始就定位於頭部，或試圖在滾動中通過jQuery定位標題內容...但是我從未得到我希望的結果。

編輯2： 如果有人知道具有類似效果的網站，請分享它。

編輯3： 由於到目前爲止沒有人得到我的問題，我會嘗試描述它更詳細。

我有一個標題和一個內容區域。頁面加載時，標題設置爲視口的整個高度。標題在此處使用靜態css定位，因此內容區域正確地位於視口之外的標題下方。

如果我向下滾動，標題會縮小，標題內容的某些CSS會變成動畫。內容區域現在必須隨着標題下方的箭頭向上移動，並且動畫完成時標題應該固定。

到目前爲止，您的所有示例都不關心標題下方內容的流向。

Edit4：

haxxxton回答的問題和解決方案看起來甚至比我其實是想更好。所以我會在24小時結束時獎賞他的賞金。

編輯5

其實haxxxtons答案沒有解決我的問題。我很驚訝，因爲我監督了一些問題。箭頭必須是內容部分的一部分，因爲最終網站上會有更多內容部分。 我想出了另一種解決方案，但我也陷入了困境。現在我不認爲這是可以做到的。這裏是我的小提琴的更新版本：

http://jsfiddle.net/30j5njrw/14/

箭頭仍無法正常，因爲我不能在滾動事件做的preventDefault（）移動。我需要在滾動事件期間當頁眉的高度不是165px時執行preventDefault（）。 根據在google上發現的不同消息，在滾動事件上不可能做preventDefault（）。我可能會嘗試在滾動事件期間使用內容區域的填充來使其看起來像不滾動。但我不認爲我想要的效果實際上是可能的。

Edit6：

它的工作原理的內容區域邊距設置爲滾動偏移量的像素。看到新的小提琴：

Fiddle update

但仍然是一個問題。當你真的很快滾動時，它會以某種方式閃爍，並且頁腳的位置很奇怪。但我不知道是否可以使用任何其他輸入設備快速滾動，而不是使用MacBook的魔術觸摸板，因此如果我在幾個小時內未找到解決方案，我可能會忽略此問題。

Answer 1

這是因爲當用戶在第一個實例中向下滾動（以觸發你的動畫）時，你讓它們繼續滾動，然後將position:fixed;應用到您的標題..這使得它在頁面中「跳躍」 。

解決方案，實際上是你已經嘗試過的東西;首先從頭開始position:fixed，然後從那裏開始生成動畫。

通過將fixed應用於標題開頭，其他元素稍後不會顯示爲「快照」。

我發現在標題中添加「箭頭」元素會停止明顯的捕捉（並且我假設你打算在這裏始終保持這種狀態）。

JSFIDDLE DEMO

---

CSS

body { 
    text-align: center; 
} 
.clear { 
    clear: both; 
} 
h1 { 
    margin-top: 4px; 
} 
h1 p { 
    font-size: 18px; 
    margin: 5px 0 10px 0; 
} 
h2 { 
    margin-bottom: 50px; 
} 
h1, h2, h3, h4 { 
    text-align: center; 
} 
.white, .white * { 
    background-color: #ffffff; 
    border-color: #2d2d2d; 
    color: #2d2d2d; 
} 
.dark, .dark * { 
    background-color: #2d2d2d; 
    border-color: #ffffff; 
    color: #ffffff; 
} 
#top { 
    top: 0; 
    text-align: center; 
    width: 100%; 
    position:fixed; 
    overflow: visible !important; 
    z-index: 1000; 
} 
#top .arrow{ 
    border-left: 30px solid transparent; 
    border-right: 30px solid transparent; 
    border-top-width: 20px; 
    border-top-style: solid; 
    border-top-color:white; 
    height: 20px; 
    margin: 0 0 0 -30px; 
    width: 60px; 
    position:absolute; 
    top:100%; 
    left:50%; 
    background-color:transparent; 
} 
#top p.slogan { 
    font-family:'Poiret One', cursive; 
    margin-top: 50px; 
    font-size: 20px; 
} 
#top a { 
    display: block; 
    font-family:'Poiret One', cursive; 
    font-size: 20px; 
    text-align: center; 
    width: 117px; 
} 
#top a:hover { 
    color: #767676; 
    text-decoration: none; 
} 
#top nav { 
    float: right; 
    left: -50%; 
    margin-top: 35px; 
    position: relative; 
    text-align: left; 
} 
#top ul { 
    left: 50%; 
    margin: 0 auto; 
    padding: 0; 
    position: relative; 
} 
#top li { 
    float: left; 
    margin: 0 5px; 
    position: relative; 
    width: 100px; 
} 
#contact { 
    padding-top:215px; 
    height: 1300px; 
} 

JS

$(document).ready(function() { 
    changeHeaderHeight(); 
    var lastScrollTop = 0; 
    var isAnimationFinished = true; 
    var isScrolled = $(window).scroll(function() { 
     var scrollTop = $(this).scrollTop(); 
     if (isAnimationFinished == true) { 
      isAnimationFinished = false; 
      topHeight = $('#top').height() - scrollTop; 
      $('#top h1').animate({ 
       fontSize: '14px' 
      },500); 
      $('#top h1 p').fadeOut(); 
      $('#top p.slogan').fadeOut(); 
      $('#top').animate({ 
       height: 165 + 'px' 
      },1000); 
      $('#main-navigation').animate({ 
       marginTop: 5 + 'px', 
      },1000); 
      $('#main-navigation a').animate({ 
       width: '97px', 
       fontSize: '16px', 
      },1000); 
      $('#main-navigation li').animate({ 
       width: '97px' 
      },1000); 
     } 
     lastScrollTop = scrollTop; 
    }); 
    $.when(isScrolled).then(function() { 
     if ($('#top').height() == 165) { 
      isAnimationFinished = true; 

     } 
    }); 



}); 
$(window).resize(function() { 
    changeHeaderHeight(); 
}); 
function changeHeaderHeight() { 
    var viewportHeight = $(window).height(); 
    $('header#top').height(viewportHeight); 
} 

HTML

<body data-spy="scroll" data-target="#main-navigation"> 
    <header id="top" class="white"> 
    <h1> 
     Title 
     <p> 
     ...slogan goes here 
     </p> 
    </h1> 
    <nav id="main-navigation"> 
     <ul data-spy="affix" data-offset-top="155" class="nav"> 
     <li> 
      <a href="#news" title="News"> 
      News 
      </a> 
     </li> 
     <li> 
      <a href="#agency" title="Agentur"> 
      Agentur 
      </a> 
     </li> 
     <li> 
      <a href="#services" title="Leistungen"> 
      Leistungen 
      </a> 
     </li> 
     <li> 
      <a href="#portfolio" title="News"> 
      Portfolio 
      </a> 
     </li> 
     <li> 
      <a href="#contact" title="News"> 
      Kontakt 
      </a> 
     </li> 
     </ul> 
    </nav> 
    <div class="clear"></div> 
    <p class="slogan"> 
     Blabla 
    </p> 
    <p class="slogan"> 
     More Blabla 
    </p> 
    <div class="arrow"> 
    </div> 
    </header> 
    <section id="contact" class="dark"> 
    <header> 
     <h2> 
     Contact 
     </h2> 
    </header> 
    </section> 
    <footer class="white"> 
    <a class="scroll-top" href="#top"> 
     Logo 
    </a> 
    </footer> 
</body> 

Answer 2

這裏是另一個堆棧溢出問題，詢問類似的東西：jQuery - Sticky header that shrinks when scrolling down

接受的答案已經驗證碼：

$(function(){ 
    $('#header_nav').data('size','big'); 
}); 

$(window).scroll(function(){ 
    if($(document).scrollTop() > 0) 
{ 
    if($('#header_nav').data('size') == 'big') 
    { 
     $('#header_nav').data('size','small'); 
     $('#header_nav').stop().animate({ 
      height:'40px' 
     },600); 
    } 
} 
else 
    { 
    if($('#header_nav').data('size') == 'small') 
     { 
     $('#header_nav').data('size','big'); 
     $('#header_nav').stop().animate({ 
      height:'100px' 
     },600); 
     } 
    } 
}); 

有了這個JS提琴例子。 http://jsfiddle.net/jezzipin/JJ8Jc/