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


Posted in Javascript onAugust 27, 2020

本文实例为大家分享了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实现渐变顶部固定自适应导航栏

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

Javascript 相关文章推荐
让checkbox不选中即将选中的checkbox不选中
Jul 11 Javascript
JavaScript实现身份证验证代码
Feb 17 Javascript
JavaScript实现自动切换图片代码
Oct 11 Javascript
vue插件tab选项卡使用小结
Oct 27 Javascript
Angular2 PrimeNG分页模块学习
Jan 14 Javascript
jQuery弹出层插件popShow用法示例
Jan 23 Javascript
微信小程序 可搜索的地址选择实现详解
Aug 28 Javascript
Vue基础配置讲解
Nov 29 Javascript
基于js实现数组相邻元素上移下移
May 19 Javascript
基于canvasJS在PHP中制作动态图表
May 30 Javascript
vue设置全局访问接口API地址操作
Aug 14 Javascript
一文彻底理解js原生语法prototype,__proto__和constructor
Oct 24 Javascript
微信小程序 实战程序简易新闻的制作
Jan 09 #Javascript
jquery实现多次上传同一张图片
Jan 09 #Javascript
微信小程序 欢迎页面的制作(源码下载)
Jan 09 #Javascript
微信小程序 开发之快递查询功能的实现
Jan 09 #Javascript
vue日期组件 支持vue1.0和2.0
Jan 09 #Javascript
jQuery编写设置和获取颜色的插件
Jan 09 #Javascript
图片懒加载插件实例分享(含解析)
Jan 09 #Javascript
You might like
【动漫杂谈】关于《请在T台上微笑》
2020/03/03 日漫
PHP过滤★等特殊符号的正则
2014/01/27 PHP
PHP中的output_buffering详细介绍
2014/09/27 PHP
php 数组处理函数extract详解及实例代码
2016/11/23 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
JavaScript DOM 添加事件
2009/02/14 Javascript
CCPry JS类库 代码
2009/10/30 Javascript
utf-8编码引起js输出中文乱码的解决办法
2010/06/23 Javascript
基于jquery的无缝循环新闻列表插件
2011/03/07 Javascript
Javascript中string转date示例代码
2013/11/01 Javascript
flash遮住div问题的正确解决方法
2014/02/27 Javascript
JavaScript中日期函数的相关操作知识
2016/08/03 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
2016/10/14 Javascript
BootStrap中
2016/12/10 Javascript
微信小程序之数据双向绑定与数据操作
2017/05/12 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
2017/12/15 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
2018/04/17 Javascript
说说Vuex的getters属性的具体用法
2019/04/15 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
2019/06/06 Javascript
vue中移动端调取本地的复制的文本方式
2020/07/18 Javascript
Python 调用Java实例详解
2017/06/02 Python
Python 逐行分割大txt文件的方法
2017/10/10 Python
Python实现Event回调机制的方法
2019/02/13 Python
PyCharm专业最新版2019.1安装步骤(含激活码)
2019/10/09 Python
使用pyinstaller逆向.pyc文件
2019/12/20 Python
Python双链表原理与实现方法详解
2020/02/22 Python
美国设计师精美珠宝购物网:Netaya
2016/08/28 全球购物
洲际酒店集团英国官网:IHG英国
2019/07/10 全球购物
Python面试题集
2012/03/08 面试题
幼儿园家长会邀请函
2014/01/15 职场文书
教导处工作制度
2014/01/18 职场文书
初中生自我评价
2014/02/01 职场文书
拓展策划方案
2014/06/03 职场文书
三年级作文之趣事作文
2019/11/04 职场文书
Python爬虫中urllib3与urllib的区别是什么
2021/07/21 Python
mysql如何查询连续记录
2022/05/11 MySQL