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 学习笔记(三)
Dec 29 Javascript
基于jquery的一个简单的脚本验证插件
Apr 05 Javascript
js 中 document.createEvent的用法
Aug 29 Javascript
jquery插件开发之实现md5插件
Mar 17 Javascript
JQuery实现展开关闭层的方法
Feb 17 Javascript
javascript实现简单的鼠标拖动效果实例
Apr 10 Javascript
Knockoutjs 学习系列(二)花式捆绑
Jun 07 Javascript
Node.js的文件权限及读写flag详解
Oct 11 Javascript
jQuery实现删除li节点的方法
Dec 06 Javascript
js滚轮事件 js自定义滚动条的实现
Jan 18 Javascript
vue实现路由懒加载的3种方法示例
Sep 01 Javascript
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
微信小程序 实战程序简易新闻的制作
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
PHP时间戳使用实例代码
2008/06/07 PHP
PHP采用自定义函数实现遍历目录下所有文件的方法
2014/08/19 PHP
使用PHP Socket 编程模拟Http post和get请求
2014/11/25 PHP
PHP函数func_num_args用法实例分析
2015/12/07 PHP
jQuery 浮动广告实现代码
2008/12/25 Javascript
JQuery 风格的HTML文本转义
2009/07/01 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
2014/03/25 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
2014/06/27 Javascript
jquery获取radio值(单选组radio)
2014/10/16 Javascript
node.js中的fs.openSync方法使用说明
2014/12/17 Javascript
通过伪协议解决父页面与iframe页面通信的问题
2015/04/05 Javascript
JavaScript实现标题栏文字轮播效果代码
2015/10/24 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
2018/07/13 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
2018/10/19 Javascript
JS数组方法slice()用法实例分析
2020/01/18 Javascript
vue 解决provide和inject响应的问题
2020/11/12 Javascript
vc6编写python扩展的方法分享
2014/01/17 Python
在Python中使用itertools模块中的组合函数的教程
2015/04/13 Python
Python迭代器与生成器基本用法分析
2018/07/26 Python
详解python执行shell脚本创建用户及相关操作
2019/04/11 Python
Python3 sys.argv[ ]用法详解
2019/10/24 Python
Jupyter notebook如何修改平台字体
2020/05/13 Python
Python控制台实现交互式环境执行
2020/06/09 Python
python des,aes,rsa加解密的实现
2021/01/16 Python
使用CSS实现阅读进度条
2017/02/27 HTML / CSS
css3实现图片遮罩效果鼠标hover以后出现文字
2013/11/05 HTML / CSS
英国最大的在线床超市:Bed Star
2019/01/24 全球购物
阿迪达斯新加坡官方网站:adidas新加坡
2019/12/06 全球购物
法国隐形眼镜网站:VisionDirect.fr
2020/03/03 全球购物
展会邀请函范文
2014/01/26 职场文书
优秀技术工人先进材料
2014/02/17 职场文书
工地安全标语
2014/06/07 职场文书
2014年国庆节寄语
2014/09/19 职场文书
党支部考察鉴定意见
2015/06/02 职场文书
《少年闰土》教学反思
2016/02/18 职场文书
世界文化遗产导游词
2019/08/07 职场文书