脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → bootstrap导航栏

Bootstrap实现渐变顶部固定自适应导航栏

 更新时间：2020年08月27日 10:06:10   投稿：lijiao  
这篇文章给大家介绍了Bootstrap实现渐变顶部固定自适应导航栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了Bootstrap实现渐变顶部固定自适应导航栏的具体代码，供大家参考，具体内容如下

具体代码如下所示：

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
 <title></title> 
 <meta charset="utf-8" />
 <link href="<%=path%>/css/style.css" rel="stylesheet" type="text/css" /> 
 <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> 
 <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> 
 <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 
<body> 
 <nav class="navbar navbar-fixed-top my-navbar" role="navigation"> 
 <div class="container-fluid"> 
  <div class="navbar-header"> 
  <button type="button" class="navbar-toggle" data-toggle="collapse" 
   data-target="#example-navbar-collapse"> 
   <span class="sr-only">切换导航</span> 
   <span class="icon-bar"></span> 
   <span class="icon-bar"></span> 
   <span class="icon-bar"></span> 
  </button> 
  <a class="navbar-brand" href="#">菜鸟教程</a> 
  </div> 
  <div class="collapse navbar-collapse" id="example-navbar-collapse"> 
  <ul class="nav navbar-nav"> 
   <li class="active"><a href="#">iOS</a></li> 
   <li><a href="#">SVN</a></li> 
   <li><a href="#">Asp.Net</a></li> 
  </ul> 
  </div> 
 </div> 
 </nav> 
 <div class="bg"></div> 
 <script> 
 $(window).scroll(function () { 
  if ($(".navbar").offset().top > 50) {$(".navbar-fixed-top").addClass("top-nav"); 
  }else {$(".navbar-fixed-top").removeClass("top-nav");} 
 })</script> 
</body></html>

style.css

 html, body {width:100%;height:100%;} /*非常重要的样式让背景图片100%适应整个屏幕*/ 
 .bg {display: table;width: 100%;height: 100%;padding: 100px 0;text-align: center;color: #fff;background: url(http://www.xiandanke.cn/Image/intro-bg.jpg) no-repeat bottom center;background-color: #000;background-size: cover;} 
 .my-navbar {padding:20px 0;transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;} 
 .my-navbar a{background:transparent !important;color:#fff !important} 
 .my-navbar a:hover {color:#45bcf9 !important;background:transparent;outline:0} 
 .my-navbar a {transition: color 0.5s ease-in-out;}/*-webkit-transition ;-moz-transition*/ 
 .top-nav {padding:0;background:#000;} 
 button.navbar-toggle {background-color:#fbfbfb;}/*整个背景都是transparent透明的，会看不到，所以再次覆盖一下*/ 
 button.navbar-toggle > span.icon-bar {background-color:#dedede}

真的只用了9行代码，原理挺简单的，但是要注意以下几点

1.html,body{width:100%;height:100%} ,必须写这个样式，才能让html中的子元素100%占满整个屏幕，也就是要实现背景图片占满100%的整个屏幕

2.bootstrap中的类 nav-fixed-top的意义在于固定导航栏在顶部

3.添加scroll 事件，在切换class的时候实现动态的效果

4.整个效果的实现原理是使用了transition 属性,transition属性的使用方法是：

以上所述是小编给大家介绍的Bootstrap实现渐变顶部固定自适应导航栏，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • 微信小程序录音与播放录音功能

    微信小程序录音与播放录音功能

    这篇文章主要介绍了微信小程序录音与播放录音功能,小程序中提供了两种录音的API，旧版本录音功能和新版录音功能，需要的朋友可以参考下
    2017-12-12
  • webpack几种手动实现HMR的方式

    webpack几种手动实现HMR的方式

    众所周知，在webpack中使用模块热替换(HMR)，能够使得应用在运行时，本文就介绍一下如何实现HMR，感兴趣的可以了解一下
    2021-07-07
  • 防止浏览器记住用户名及密码的简单实用方法

    防止浏览器记住用户名及密码的简单实用方法

    很多浏览器都有自动填写功能，我在input上使用了autocomplete="off"，但在有的浏览器上还是被记住了用户名跟密码，请问有没有更有效及简便的方法来防止浏览器记住用户名及密码
    2013-04-04
  • IE DOM实现存在的部分问题及解决方法

    IE DOM实现存在的部分问题及解决方法

    IE DOM实现存在的部分问题及解决方法
    2009-07-07
  • 利用Print.js实现打印pdf、HTML及图片(可设置样式可分页)

    利用Print.js实现打印pdf、HTML及图片(可设置样式可分页)

    在我们需要在页面中打印某个区域的内容或者生成pdf的时候,我们可以直接用printJs库,这篇文章主要给大家介绍了关于利用Print.js实现打印pdf、HTML及图片的相关资料,可设置样式可分页,需要的朋友可以参考下
    2024-05-05
  • javascript 嵌套的函数（作用域链）

    javascript 嵌套的函数（作用域链）

    当你进行函数的嵌套时，要注意实际上作用域链是发生变化的，这点可能看起来不太直观。你可把下面的代码置入firebug监视值的变化。
    2010-03-03
  • JavaScript文档注释深入讲解(非常详细)

    JavaScript文档注释深入讲解(非常详细)

    这篇文章主要给大家介绍了关于JavaScript文档注释的相关资料,当编写代码时文档注释是一种特殊的注释格式,用于描述函数、类、方法或变量的功能、使用方法和参数等详细信息,需要的朋友可以参考下
    2024-01-01
  • 使用mini-define实现前端代码的模块化管理

    使用mini-define实现前端代码的模块化管理

    这篇文章主要介绍了使用mini-define实现前端代码的模块化管理，十分不错的一篇文章，这里推荐给有需要的小伙伴。
    2014-12-12
  • js定时器(执行一次、重复执行)

    js定时器(执行一次、重复执行)

    这篇文章主要分享一段js代码，有关js定时器的小例子，分为执行一次的定时器与重复执行的定时器,需要的朋友可以参考下
    2014-03-03
  • JS面试之对事件循环的理解

    JS面试之对事件循环的理解

    这篇文章主要为大家介绍了JS面试之对事件循环的理解分析详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-09-09

最新评论