首页 » Web技术 » JS/jQuery » 正文

[译]Bootstrap的Affix与ScrollSpy用法[二]

接上一篇文章《[译]Bootstrap的Affix与ScrollSpy用法[一]》,我们在前一篇已经分享了如何使用Bootstrap的Affix插件,这一篇接着分享如何结合ScrollSpy实现前面例子中的效果。

使用ScrollSpy(滚动监听)

为了给我们的项目增加ScrollSpy效果,我们必须定义当页面滚动时需要监听(spy)的元素,这个元素通常都是body元素。ScrollSpy要求我们必须使用Bootstrap的 导航(nav) 组件。

首先,我们把data-spy="scroll"属性/值应用到要监听的body元素上。这里值得一提的是,Bootstrap建议我们把监听的元素的position属性设置为relative

接下来,我们通过给我们需要监听的元素添加data-target属性来标识特定的部分。这个属性的值必须与我们nav组件的父级元素的id或者class属性相匹配。所以我们的body标签应该是这样的(注意:“.”包含在data-*属性的值中)。

<body data-spy="scroll" data-target=".scrollspy">

同affix插件一样,我们也可以通过JavaScript来激活ScrollSpy插件。我们的例子并没有使用此选项。激活插件后,我们的HTML结构应该是这样的:

<body data-spy="scroll" data-target=".scrollspy">
    <!-- content here... -->
    <div class="col-md-3 scrollspy">
        <ul id="nav" class="nav hidden-xs hidden-sm" data-spy="affix">
            <!-- nav items here... -->
        </ul>
    </div>
    <!-- content here... -->
</body>

以及必须的CSS:

body {
    position: relative;
}

我们可以通过浏览器的开发者工具来理解这个插件的作用。当用户滚动页面的时候,插件会“watch”目标元素并为适当的li子元素增加active属性。我们就可以通过这个class属性来定义激活元素的样式。一些li包含子导航元素,我们也可以通过样式来实现很好看的效果。

当使用ScrollSpy插件的时候,会生成下面这样的HTML结构:

Bootstrap ScrollSpy

下面是我为我们这个例子中导航组件添加的样式。注意:我们需要把我使用的导航组件的样式考虑在内。

.nav .active {
    font-weight: bold;
    background: #72bcd4;
}
.nav .nav {
    display: none;
}
.nav .active .nav {
    display: block;
}
.nav .nav a {
    font-weight: normal;
    font-size: .85em;
}
.nav .nav span {
    margin: 0 5px 0 2px;
}
.nav .nav .active a,
.nav .nav .active:hover a,
.nav .nav .active:focus a {
    font-weight: bold;
    padding-left: 30px;
    border-left: 5px solid black;
}
.nav .nav .active span,
.nav .nav .active:hover span,
.nav .nav .active:focus span {
    display: none;
}

总结

下面是我们例子的链接:

这篇文章中,我们看到了如何使用Bootstrap的affix插件和scrollspy插件来实现页面滚动效果。你可能已经在Bootstrap的网站看到过这个效果,现在你应该已经知道了它们是如何现实的了。

如果你正在使用这些组件,或者其他第三方的相似组件,可以在评论中来给我们分享你的经验。

 

via:SitePoint

赞 (5) or

本文共 4 个回复

  • focus 2015/08/27 10:23

    如果顶部使用置顶的导航栏,那么affix定位会被遮挡,在官网上找到解决办法为 padding-top: 100px; margin-top: -90px;但是这样的话,滚动定位就无法识别,因为差了一些高度.不知道有没有解决办法,让置顶导航栏和左侧affix同时有效

    • Specs 2015/08/27 14:21

      @ focus 你说的就是类似与我网站的这个效果吧?

      • focus 2015/08/29 15:39

        @ Specs 置顶菜单是有,但是没有发现左侧或者右侧的菜单.没有滚动监听吧?

        • Specs 2015/08/31 08:59

          @ focus 固定是用的affix效果,spy的是那个滚动监听。

发表评论