简体   繁体   English

固定的动态侧边栏导航菜单?

[英]Fixed, dynamic sidebar navigation menu?

My site is built on Roots/Bootstrap/WordPress, and I'm sure there's a lot of similar things to what I'm looking for but I'm interested in specific examples of how to implement this. 我的网站是建立在Roots / Bootstrap / WordPress之上的,我敢肯定有很多与我要寻找的东西类似的东西,但是我对如何实现这一点的特定示例感兴趣。 I'm not even sure where to begin. 我什至不知道从哪里开始。

I'm looking to create a physically fixed sidebar navigation menu that is basically an outline of the page - first level are the H1's, second level are the H2's and so on. 我要创建一个物理固定的侧边栏导航菜单,该菜单基本上是页面的轮廓-第一层是H1,第二层是H2,依此类推。

Similarly to what GetBootstrap.com does for their sidebar navigation. 与GetBootstrap.com的侧边栏导航类似。 As the user scrolls through the page, different items get highlighted in the sidebar navigation. 当用户滚动浏览页面时,侧边栏导航中会突出显示不同的项目。

在此处输入图片说明

This is, in fact, a component of the Bootstrap.js library. 实际上,这是Bootstrap.js库的组件。

http://getbootstrap.com/javascript/#affix http://getbootstrap.com/javascript/#affix

You can use position: fixed property. 您可以使用position:固定属性。 This css below fix #menu at the same position on screen no matter how you scroll. 无论您如何滚动,此css都将修复下面的#menu菜单固定在屏幕上的同一位置。

#menu{
        width:10px;
        height:10px;
        position: fixed;
        left: 50px;
        top: 50px;
        background-color: red;
    }

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM