JS通過滾動位置移動Div

當導航欄在頁面上的位置達到400px時，我想將引導「navbar」標題從頁面移開。JS通過滾動位置移動Div

如果您看this jsfiddle，我希望.navbar在藍色塊開始時（400px）離開頁面的頂部。導航欄將通過紅色的div保留在頁面上，然後在藍色塊開始時離開頁面的頂部。

我試圖與scrollorama (jquery plugin)要做到這一點，但還沒有成功，但：

$(document).ready(function() { 
    var scrollorama = $.scrollorama({ blocks:'.scrollblock' }); 
    scrollorama.animate('#fly-in',{ delay: 400, duration: 300, property:'top', start:-1400, end:0 }); 
});

我要尋找是純JavaScript的解決方案，或與scrollorama插件。感謝您的任何想法！

來源

2014-01-23 Nick B

我不是很熟悉的scrollorama插件但你可以得到這個簡單的使用jQuery通過scroll()事件進行：

$(window).scroll(function() { 
    var winTop = $(this).scrollTop(); 
    var redHeight = $('#red').height(); 
    if (winTop >= redHeight) { 
    /*if the scroll reaches the bottom of the red <div> make set '#move' element 
     position to absolute so it will move up with the red <div> */ 

     $('#move').css({ 
      'position': 'absolute', 
      'bottom': '0px', 
      'top': 'auto' 
     }); 
    } else { 
     //else revert '#move' position back to fixed 

     $('#move').css({ 
      'position': 'fixed', 
      'bottom': 'auto', 
      'top': '0px' 
     }); 
    } 
});

看到這個更新的jsfiddle：jsfiddle.net/52VtD/1945/

編輯：使其導致導航欄消失在紅色div結束的同一點

我注意到早些時候，但我無法定位問題，所以我刪除了導入的樣式表並創建了導航欄的基本樣式。爲了讓導航欄在那個紅色的DIV結束，你需要減去導航欄的高度的條件相同點消失：

if (winTop >= redHeight - $('#move').height()) {

我還重組了標記得到這個工作正常。我已將嵌套在紅色div內的導航欄並將紅色div的位置設置爲relative。

看到這個的jsfiddle：jsfiddle.net/52VtD/1981/

來源

2014-01-23 09:09:21

在小提琴偉大的作品，但是當我把它放在我的網站不會出於某種原因。你有什麼機會快速查看爲什麼它不適合我？ [網站]（http://www.californiafootgolfclub.com/dev/） –

是的，在網站上，您希望導航欄何時離開頂部？當滾動條到達滑塊的底部時？ –

其實抱歉犯了一個愚蠢的錯誤：它在jsfiddle中工作。但是，有一個問題是，我怎樣才能讓導航欄消失在紅色div結束的地方？那麼導航欄就不會存在於藍色的div上了嗎？目前navbar延伸到藍色div直到紅色div消失.. –

聽滾動事件使用jQuery找到，如果導航欄用紅色或藍色的div

重疊指定一個類來紅格

<div class="redDiv" style="height:400px; background-color: red;">

後來聽滾動事件，並使用getBoundingClientRect（）來查找導航欄的共同ORD，並在視口中的div來檢查重疊

$(document).scroll(function(event) 
       { 
        var rect1 = $('.navbar').get(0).getBoundingClientRect(); 
        var rect2 = $('.redDiv').get(0).getBoundingClientRect(); 
        var overlap = !(rect1.right < rect2.left || 
      rect1.left > rect2.right || 
      rect1.bottom < rect2.top || 
      rect1.top > rect2.bottom) 

        if(!overlap) 
        { 
         if ($(".navbar").is(":visible")) { 
          $('.navbar').hide(); 
         } 
        } 
        else 
        { 
         if (!$(".navbar").is(":visible")) { 
          $('.navbar').show(); 
         } 
        } 
       });

這裏是工作提琴 http://jsfiddle.net/SXzf7/

來源

2014-01-23 08:54:53 krishnan

JS通過滾動位置移動Div

回答

相關問題