Question

我即将对我的投资组合进行编码，我希望在此网站中进行如此垂直导航：http://pixelhint.com/demo/magnetic/index.html

我看到其他人用JQuery做了，但它是横向的。如果导航是垂直的，我找不到任何关于如何做的解决方案。

我将不胜感激任何帮助。我喜欢使用jquery插件的想法，但我认为如果我从头开始编码它会更好。我只想知道如何做到这一点。

Answer 1

你可以像这样轻松追加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;
}

Answer 2

只有在这种情况下你才对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
}

什么是制作粘性垂直导航的最佳方法

2 个答案: