使用HTML/CSS浮動菜單欄？

想知道是否有人知道創建一個浮動菜單欄的方法，該菜單欄粘貼到頁面上的某個點上，直到瀏覽器窗口在頁面上下得足夠遠並將其取消粘貼，然後菜單欄開始滾動。我想要的效果與此http://www.jtricks.com/javascript/navigation/floating.html javascript菜單完全相同。不過，我真的想用CSS來做到這一點。我知道我可以讓div完全定位，它會向下移動頁面，我試着讓一個DIV相對位置（父div），然後是另一個div，這是絕對定位的，但我無法得到它的工作。是否有人知道如何使用CSS進行這項工作，還是需要成爲JS？使用HTML/CSS浮動菜單欄？

在此先感謝。

Jon。

來源

2011-03-15 Jon Kyte

我相信使用JavaScript是得到你描述的效果的唯一解決方案。這是一個快速的demo旗幟，開始於絕對位置，並在用戶滾動時進入修復狀態。

<div style="height:1000px;width:500px;"> 

    <div id="floatbar" style="background:gray; 
           width:200px; 
           height:40px; 
           position:absolute; 
           left:0;top:200px;"> 
    </div> 
</div> 

$(window).scroll(function(){ 
    if ($(window).scrollTop() >= 200) 
    { 
     $("#floatbar").css({position:'fixed',left:'0',top:'0'}); 
    } 
    else 
    { 
     $("#floatbar").css({position:'absolute',left:'0',top:'200px'}); 
    } 
});

來源

2011-03-15 19:16:29 agradl

非常感謝你shiznit123，我認爲這可能只能用javascript實現。我只是認爲可能會有CCS固定/相對/絕對定位的組合。然後，我必須使用JavaScript，我只是發現JavaScript使我的代碼混亂，當它可以完成與CSS。再次，謝謝！ – 2011-03-16 16:09:07

我相信它需要是JS。我可以想象，使用jQuery可能會相當簡單，我真的無法想出任何只有使用CSS才能實現的方法。我會盡量考慮一下，但我懷疑我會找到一個解決方案。

來源

2011-03-15 18:16:16

那麼你不能用一個親戚的絕對定位div來做到這一點。固定位置基本上是絕對定位的div，相對於窗口定位。我會說，你肯定需要在這裏的JavaScript。

來源

2011-03-15 18:21:21

好，如果你不需要動畫，比CSS只是使用
position: fixed;
。

如果你想動畫，你需要使用JavaScript。例如在jquery的：

$(window).scroll(function(){ 
    $('#menu').css({ 
     right: 0, 
     top: 0 
    }) 
})

來源

2011-03-15 18:23:39 Neal

這應該是比較容易與固定側欄和浮動內容部分。嘗試這樣的...

#container { 
    width: 960px; 
    margin: 0 auto; 
    overflow: hidden; 
    position: relative; 
} 

#sidenav { 
    width: 300px; 
    position: fixed; /*--Fix the sidenav to stay in one spot--*/ 
    float: left; /*--Keeps sidenav into place when Fixed positioning fails--*/ 
} 

#content { 
    float: right; /*--Keeps content to the right side--*/ 
    width: 620px; 
    padding: 0 20px 20px; 
}

來源

2011-03-15 18:25:37 Kory

使用HTML/CSS浮動菜單欄？

回答

相關問題