當div在窗口頂部時出現菜單 - jquery

我正在建立一個單頁網站，基本上是4個大divs。第一個是着陸部分。隨着用戶向下滾動頁面id，讓導航菜單從第二個div的頂部生成動畫。該菜單將保持固定在窗口的頂部。什麼是最好的方式來找到一個div時滾動窗口的頂部？任何建議，最好的辦法做到這一點將不勝感激！請參閱小提琴基本頁面結構。當div在窗口頂部時出現菜單 - jquery

http://jsfiddle.net/aartese/3kRVm/11/

<body> 
    <div class="row"><!--landing section --> 
    <div class="col-md-12 landing">Landing</div> 
    </div> <!-- /landing section --> 
    <div class="row"><!--about section --> 
    <div class="col-md-12 about">About</div> 
    </div><!-- /about section --> 
    <div class="row"><!-- professional profile section --> 
    <div class="col-md-12 professional">Professional</div> 
    </div><!-- /professional profile section --> 
    <div class="row"> <!-- contact section --> 
    <div class="col-md-12 contact">Contact</div> 
    </div> <!-- /contact section -->  
    </body>

來源

2013-11-04 Anthony

我認爲觸底所以，這可能是不錯的解決方案是

HTML：

<div id="menu">top menu </div>

CSS：

#menu { 
width : 800px; 
height : 50px; 
background-color:blue; 
position: fixed; 
display : none; 
}

腳本：

$(document).scroll(function() { 
$('#menu').toggle($(this).scrollTop() > 80); 
});

現在，您可以在jQuery中添加動畫選項。

來源

2013-11-04 21:59:25 StreetCoder

我真的很喜歡這個解決方案！使用滾動切換完美。謝謝！ – Anthony

實際上，我不確定如果我喜歡使用scrollTop（）的設置高度，因爲如果您更改了窗口大小，則會發生更改，對不對？我會嘗試點滴解決方案。 – Anthony

你也可以試試這個，但是，http://jsfiddle.net/adamb/F4BmP/ – StreetCoder

您檢查格偏差（），與$（窗口）頂部.scrollTop（）。

$(window).scroll(function(){ 
    if($(window).scrollTop() >= $('#sample').offset().top){ 
     $('#sample').addClass('black'); 
    }else{ 
     $('#sample').removeClass('black'); 
    } 
})

這裏是一個演示：Demo

來源

2013-11-04 21:47:18 drip

我不知道我得到你想要的東西.......

請問關於-DIV得到固定所有的時間？在這種情況下，你會想要你的位置：fixes-css的屬性。

如果你只希望有它固定的，一旦你滾動通過你的第一個div，你必須確定div的大小，然後chekc（通過Javascript），如果你通過的document.body.scrollTop

來源

2013-11-04 21:48:41 Christine

感謝streetcoder讓我走向正確的方向。我稍微修改了他的解決方案：

$(document).scroll(function() { 
    var divHeight = $('.landingBackground').height(); 
    $('.navbar').toggle($(this).scrollTop() > divHeight); 
});

這會得到第一個主div（.landingBackground）的高度。然後在滾動時根據該高度切換菜單。

來源

2013-11-04 22:34:33 Anthony

哎呦，以爲我做到了！你走了。 – Anthony

當div在窗口頂部時出現菜單 - jquery

回答

相關問題