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

【问题标题】：What's the best way of making sticky vertical navigation制作粘性垂直导航的最佳方法是什么
【发布时间】：2014-07-26 21:02:25
【问题描述】：

我即将对我的作品集进行编码，我希望在这个网站上实现这样的垂直导航：http://pixelhint.com/demo/magnetic/index.html

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

如果有任何帮助，我将不胜感激。我喜欢使用 jquery 插件的想法，但我认为如果我从头开始编写代码会更好。我只需要一个关于如何做的想法。

【问题讨论】：

如果您查看网络检查器工具，您可以看到用于 min-height: 100%; 和 position: fixed; 的 CSS 在这里发挥了重要作用。
我知道。但我读过粘性导航栏应该使用 JQuery/Jscript。所以我想知道它有什么用，或者它是最好的方法。
你正在寻找的东西可以只实现一个CSS。那为什么要用JS呢？

标签： jquery html css vertical-alignment navbar

【解决方案1】：

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

【讨论】：

我认为您需要 jscript/jquery 才能使其功能齐全？我猜不是垂直的？我已经阅读了一些关于如何制作水平粘性导航栏的文章，他们都在谈论将 jscript/jquery 与他们的代码结合在一起。顺便谢谢你的回答。
这取决于您阅读的内容。可能还有一些额外的功能，比如在滚动时切换导航，但是你想要的东西很容易通过 css 完成。 :)

【解决方案2】：

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

【讨论】：