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 相关文章推荐
Tab页界面,用jQuery及Ajax技术实现
Sep 21 Javascript
JavaScript中的isXX系列是否继续使用的分析
Apr 16 Javascript
自己封装的常用javascript函数分享
Jan 07 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
Mar 31 Javascript
JS实现很实用的对联广告代码(可自适应高度)
Sep 18 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
Jun 17 Javascript
JavaScript实现汉字转换为拼音的库文件示例
Dec 22 Javascript
javascript输出AscII码扩展集中的字符方法
Dec 26 Javascript
jQuery插件版本冲突的处理方法分析
Jan 16 Javascript
vue上传图片组件编写代码
Jul 26 Javascript
基于vue2实现上拉加载功能
Nov 28 Javascript
vue 检测用户上传图片宽高的方法
Feb 06 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
允许phpmyadmin空密码登录的配置方法
2011/05/29 PHP
CentOS6.5 编译安装lnmp环境
2014/12/21 PHP
PHP中把对象转换为关联数组代码分享
2015/04/09 PHP
yii框架无限极分类的实现方法
2017/04/08 PHP
PHP实现删除多重数组对象属性并重新赋值的方法
2017/06/07 PHP
JavaScript入门教程(1) 什么是JS
2009/01/31 Javascript
JavaScript DOM学习第八章 表单错误提示
2010/02/19 Javascript
jQuery dialog 异步调用ashx,webservice数据的代码
2010/08/03 Javascript
jquery 列表双向选择器之改进版
2013/08/09 Javascript
红米手机抢购的js代码
2014/03/10 Javascript
Ajax清除浏览器js、css、图片缓存的方法
2015/08/06 Javascript
js注入 黑客之路必备!
2016/09/14 Javascript
Bootstrap模态框禁用空白处点击关闭
2016/10/20 Javascript
利用jquery实现下拉框的禁用与启用
2016/12/07 Javascript
微信小程序 解析网页内容详解及实例
2017/02/22 Javascript
jQuery时间验证和转换为标准格式的时间格式
2017/03/06 Javascript
jQuery表格(Table)基本操作实例分析
2017/03/10 Javascript
微信小程序 数据遍历的实现
2017/04/05 Javascript
vuejs实现标签选项卡动态更改css样式的方法
2018/05/31 Javascript
vue在手机中通过本机IP地址访问webApp的方法
2018/08/15 Javascript
node事件循环和process模块实例分析
2020/02/14 Javascript
[01:02:02]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第二局
2016/02/25 DOTA
php使用递归与迭代实现快速排序示例
2014/01/23 Python
python端口扫描系统实现方法
2014/11/19 Python
理解Python中的With语句
2015/02/02 Python
python pandas dataframe 行列选择,切片操作方法
2018/04/10 Python
Python判断有效的数独算法示例
2019/02/23 Python
Django自带日志 settings.py文件配置方法
2019/08/30 Python
python requests包的request()函数中的参数-params和data的区别介绍
2020/05/05 Python
销售找工作求职信
2013/12/20 职场文书
文明餐桌行动实施方案
2014/02/19 职场文书
超市创意活动方案
2014/08/15 职场文书
舞蹈社团活动总结
2015/05/07 职场文书
行政答辩状范文
2015/05/21 职场文书
Python 详解通过Scrapy框架实现爬取百度新冠疫情数据流程
2021/11/11 Python
Nginx如何配置多个服务域名解析共用80端口详解
2022/09/23 Servers