jquery实现透明菜单栏下拉滚动显示背景变色效果代码
代码语言:html
所属分类:菜单导航
代码描述:jquery实现透明菜单栏下拉滚动显示背景变色效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <style> .image { background-color: #490D40; background: url(//repo.bfw.wiki/bfwrepo/image/6188c37960e43.png) no-repeat center center; background-size: cover; height: 570px; margin-top: -20px; } .image .heading { color: white; text-align: center; padding-top: 200px; } .image p { text-align: center; padding: 20px 60px; } .image p .btn { background-color: transparent; color: white; border: 1px solid white; padding: 10px; font-size: 1.2em; } .image p .btn:hover { color: #C57ED3; border-color: #C57ED3; } .navbar { height: 80px; background-color: transparent; border: none; color: white; z-index: 100; transition: background-color 1s ease 0s; } .navbar-default .navbar-brand { margin-top: 10px; color: white; } .navbar-default .navbar-brand:hover { color: #C57ED3; border: 1px solid #C57ED3; } .navbar-default .navbar-nav > li > a { color: white; margin: 10px 5px 5px 5px; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:active, .navbar-default .navbar-nav > li > a:focus { color: #C57ED3; border: 1px solid #C57ED3; } .navbar-default .navbar-nav > li > a:visited { color: #C57ED3; text-decoration: none; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { background-color: transparent; color: #C57ED3; } .navbar-default .navbar-toggle { border-color: #C57ED3; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: #490D40; } .navbar-default .navbar-toggle .icon-bar { color: #C57ED3; background-color: #C57ED3; } .navbar-default .navbar-collapse.collapse.in ul { background-color: #490D40; } /* Solid class attached on scroll past first section */ .navbar.solid { background-color: #490D40; transition: background-color 1s ease 0s; box-shadow: 0 0 4px grey; } .navbar.solid .navbar-brand { color: #C57ED3; transition: color 1s ease 0s; } .navbar.solid .navbar-nav > li > a { color:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0