美文网首页
Bootstrap Affix导航——附加导航

Bootstrap Affix导航——附加导航

作者: ryanWSJ | 来源:发表于2016-08-13 16:03 被阅读186次

2016.7.11

Bootstrap Affix导航——附加导航[链接 bootstrap中文文档]
可以实现的效果:



affix导航可以在一段距离之前和页面其它内容一起滚动,达到某个设定值时固定在页面上,不再滚动,达到一个悬浮导航的作用。
还可以搭配滚动监听一起使用。

***使用方法:
真的不得不说bootstrap的强大,使用极其简单。
eg:
<div class="inline-block" data-spy="affix" data-offset-top="50">

在需要使用的地方,添加data-spy="affix" data-offset-top="设定值",其实这样就可以啦。
但是更好的控制高度,可以在css里设定affix类的top属性:
div.inline-block.affix{
top: 50px;
}

相关文章

  • Bootstrap Affix导航——附加导航

    2016.7.11 Bootstrap Affix导航——附加导航[链接 bootstrap中文文档]可以实现的效...

  • 使用waypoints监听滚动事件scrollspy

    本来使用bootstrap自带的 affix 好像很方便的样子,但是我的导航条已经自定义好了,同时发现affix列...

  • 附加导航

    附加导航(Affix)插件允许指定 固定在页面的某个位置。一个常见的例子是社交图标。它们将在某个位置开始,但当...

  • Bootstrap-导航菜单-2018.07.07

    Bootstrap-导航菜单 nav 标签式导航 胶囊式导航 垂直胶囊式导航 两端对齐导航 导航元素下拉菜单

  • Flask 实现导航栏

    使用 Bootstrap 使用 Bootstrap 实现导航非常简单。鉴于前台界面的导航并不在 Flask 技术体...

  • bootstrap 导航

    bootstrap导航加下拉菜单(二级导航) 如图 说明在Bootstrap框架中制作二级导航,只需要将li当作父...

  • Bootstrap导航

    导航元素 以一个带有 class .nav 的无序列表开始 添加 class .nav-tabs标签导航式 带有下...

  • bootstrap导航

    1、导航(基础样式) 导航对于一位前端人员来说并不陌生。可以说导航是一个网站重要的元素组件之一,可以便于用户查找网...

  • 项目:单页面官网制作(Bootstrap)总结

    一.Bootstrap 导航栏 (1)默认的导航栏 向 标签添加 class .navbar、.navbar-...

  • Bootstrap3-导航

    Bootstrap 导航 1. 定义导航组件 基本结构: 1-1. 设计标签页 1-2. pills胶囊导航 2....

网友评论

      本文标题:Bootstrap Affix导航——附加导航

      本文链接:https://www.haomeiwen.com/subject/ipzesttx.html