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 相关文章推荐
js 动态选中下拉框
Nov 26 Javascript
Extjs学习笔记之七 布局
Jan 08 Javascript
Javascript连接多个数组不用concat来解决
Mar 24 Javascript
jQuery获取同级元素的简单代码
Jul 09 Javascript
jquery+ajax+text文本框实现智能提示完整实例
Jul 09 Javascript
学习使用bootstrap的modal和carousel
Dec 09 Javascript
简单实现js浮动框
Dec 13 Javascript
jsonp跨域请求实现示例
Mar 13 Javascript
基于JavaScript实现表格滚动分页
Nov 22 Javascript
JS实现倒序输出的几种常用方法示例
Apr 13 Javascript
查找Vue中下标的操作(some和findindex)
Aug 12 Javascript
关于小程序优化的一些建议(小结)
Dec 10 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
NT IIS下用ODBC连接数据库
2006/10/09 PHP
ajax实现无刷新分页(php)
2010/07/18 PHP
php中XMLHttpRequest(Ajax)不能设置自定义的Referer的解决方法
2011/11/26 PHP
使用PHP实现蜘蛛访问日志统计
2013/07/05 PHP
ThinkPHP实现二级循环读取的方法
2014/11/03 PHP
php修改数组键名的方法示例
2017/04/15 PHP
phpcms配置列表页以及获得文章发布时间
2017/07/04 PHP
php-fpm添加service服务的例子
2018/04/27 PHP
thinkphp5.1框架模板赋值与变量输出示例
2020/05/25 PHP
js三种排序算法分享
2012/08/16 Javascript
ie8本地图片上传预览示例代码
2014/01/12 Javascript
JavaScript_ECMA5数组新特性详解
2016/06/12 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
2016/07/09 Javascript
浅析Javascript ES6新增值比较函数Object.is
2016/08/24 Javascript
JavaScript数组迭代方法
2017/03/03 Javascript
微信小程序本地缓存数据增删改查实例详解
2017/05/24 Javascript
vue组件学习教程
2017/09/09 Javascript
Vue页面骨架屏的实现方法
2018/05/22 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
2019/03/29 Javascript
Ajax请求时无法重定向的问题解决代码详解
2019/06/21 Javascript
ionic3双击返回退出应用的方法
2019/09/17 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
2019/11/26 Javascript
element-ui中按需引入的实现
2019/12/25 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
2020/08/27 Javascript
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
python将秒数转化为时间格式的实例
2018/09/16 Python
Python django搭建layui提交表单,表格,图标的实例
2019/11/18 Python
django框架中间件原理与用法详解
2019/12/10 Python
python给图像加上mask,并提取mask区域实例
2020/01/19 Python
HTML+CSS3 模仿Windows7 桌面效果
2010/06/17 HTML / CSS
Hotels.com泰国:酒店预订网站
2019/11/20 全球购物
简述索引存取方法的作用和建立索引的原则
2013/03/26 面试题
社区领导班子四风问题原因分析及整改措施
2014/09/28 职场文书
2015年文秘个人工作总结
2015/10/14 职场文书
SQL Server 数据库实验课第五周——常用查询条件
2021/04/05 SQL Server
oracle DGMGRL ORA-16603报错的解决方法(DG Broker)
2021/04/06 Oracle