html5：變成導航欄的動態標題

-1

在node/express/backbone/stylus/dust中編碼靜態長卷軸網站。html5：變成導航欄的動態標題

我們將有一個〜400px的頁眉圖像，它位於頁面頂部的一個固定位置，然後當您向下滾動時收縮到一個〜100px導航欄，然後在您通過時在幾個狀態之間移動頁面的各個部分。

什麼是這樣的代碼的最佳方式是什麼？我知道這是一個非常寬泛的問題，而且我沒有任何代碼來證實這個問題，但我不確定CSS /腳本的組合會確保報頭縮小，然後保持不變，然後移動各州之間。

2013-12-15 fox

您使用的是jQuery嗎？ – RustyToms

yup，jquery/lodash/backbone/dust/stylus在客戶端。有一個腳手架設置，每個骨幹視圖都會自動爲我提供'index.coffee'，'style.styl'和'template.dust'，這是其中之一。 – fox

使用jQuery，只需爲scroll事件（http://api.jquery.com/scroll/）設置一個事件處理程序，然後根據滾動的當前值調整標題的高度或任何其他需要執行的操作。您可以修改這個代碼，並把它到你的頁面：

<script> 

    $(window).scroll(function(){ 
    var $header = $('header'); 
    var scrollY = $(this).scrollTop(); 

    if (scrollY < 100){ 
     $header.css('height', '400px'); 
    } elseif(scrollY > 100 && scrollY < whatever){ 
     $header.css('height', '100px'); 
    } elseif(your next range here){ 
     ... 
    } 

</script>

來源

2013-12-15 12:10:54 RustyToms

啊，這讓我走上了正確的道路，謝謝一堆。 – fox

我的第一個想法是做動畫在javascript 一些僞代碼

body 
    div long text 
    div.navigation(data-navigation="shrink") at the beginning this div is outside of the screen are 
    div other long text 
    div.navigation(data-navigation="changeElements") i am somewhere 

    script. 

$(window).scroll(function() { 
    // get all data-navigation elements 
    var allNavigationElements = $('.navigation'), i; 
    for(i = 0; i < allNavigationElements.length; i++){

這裏檢查均符合視圖元素Check if element is visible after scrolling

 if(inview){ 
     changeNavigationTo($element.data('navigation') 
     } 
    } 
}

來源

2013-12-15 12:21:34 tire0011

html5：變成導航欄的動態標題

回答

相關問題