什麼是我要編寫我的投資組合使粘垂直導航

的最佳途徑，我想在這個網站上的垂直導航這樣的：http://pixelhint.com/demo/magnetic/index.html 什麼是我要編寫我的投資組合使粘垂直導航

我看到別人用jQuery做到這一點，但它是水平的。如果導航是垂直的，我找不到任何解決方法。

我將不勝感激任何幫助。我喜歡使用jquery插件的想法，但我認爲如果我從頭編碼它會更好。我只需要一個關於如何去做的想法。

來源

2014-07-26 CheeseCake

如果您檢查Web檢查工具，您可以看到用什麼CSS爲'最小高度：100％ ;''和'位置：固定的''在這裏扮演重要角色。 –

我知道。但我讀過粘滯的navbars應該使用JQuery/Jscript。所以我想知道它有什麼用處，或者它是做這件事的最佳方式。 – CheeseCake

你正在尋找的只是一個CSS。那爲什麼要用JS？ –

你只有在這種情況下是很好用CSS

你需要做什麼基本上，就是創建一個具有固定位置的元素。然後，只需添加一些側空間（填充/保證金）到你的主要內容元素

http://jsfiddle.net/PZRqY/

<aside>navigation content</aside> 
<main>the main content</main> 

aside { 

    position:fixed; 
    left:0; 
    top:0; 
    bottom:0; 
    width:300px;//a value by which you need to add a offset onto your content element 
    height:100%; 

} 

main { 
    padding-left:300px;//offset so as the content is not overlayed by the navigation 
}

來源

2014-07-26 13:02:25

我以爲你需要jscript/jquery才能完全實用？那我不是那麼垂直的嗎？我讀過一些關於如何製作水平粘性導航欄的文章，他們都在討論jscript/jquery與他們的代碼結合在一起。謝謝你的回答。 – CheeseCake

這取決於你閱讀的內容。可能還有一些額外的功能，比如滾動時切換導航，但是你想要的東西很容易用css完成。 :) –

謝謝！ :)這是非常有用的。 – CheeseCake

您可以輕鬆地添加HTML塊這樣的：

<div class="fix-left-panel"> 
    <ul> 
    <li><a href="#">Home</a></li> 
    </ul> 
</div>

和新的CSS規則：

.fix-left-panel { 
    display: block; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 250px; 
    min-height: 100%; 
    overflow: hidden; 
    z-index: 9999; 
}

來源

2014-07-26 13:02:13 FSou1

謝謝你的回答！ :) – CheeseCake

什麼是我要編寫我的投資組合使粘垂直導航

回答

相關問題