jquery+css实现右侧悬浮导航全屏章节滚动页面代码
代码语言:html
所属分类:其他
代码描述:jquery+css实现右侧悬浮导航全屏章节滚动页面代码,右侧按钮悬浮伸缩后可点击滚动页面到相应的位置显示。
代码标签: jquery css 右侧 悬浮 导航 全屏 章节 滚动 页面 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html lang="en" class="no-js"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/modernizr.2.8.3.js"></script> <style> body { font-family: "microsoft yahei" } html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline } article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main { display: block } body { line-height: 1 } ol,ul { list-style: none } blockquote,q { quotes: none } blockquote:before,blockquote:after,q:before,q:after { content: ''; content: none } table { border-collapse: collapse; border-spacing: 0 } *,*::after,*::before { box-sizing: border-box } html { font-size: 62.5% } body { font-size: 1.6rem; font-family: "Sintony",sans-serif; color: #eaf2e3; background-color: #3a2c41; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } a { color: #c0a672; text-decoration: none } .cd-image-replace { display: inline-block; overflow: hidden; text-indent: 100%; white-space: nowrap; color: transparent } .cd-nav-trigger { display: block; position: fixed; z-index: 2; bottom: 30px; right: 5%; height: 44px; width: 44px; border-radius: .25em; background: rgba(234,242,227,0.9); cursor: pointer; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; border: 0; outline: 0 } .cd-nav-trigger span { position: absolute; height: 4px; width: 4px; background-color: #3a2c41; border-radius: 50%; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%) } .cd-nav-trigger span::before,.cd-nav-trigger span::after { content: ''; position: absolute; left: 0; height: 100%; width: 100%; background-color: #3a2c41; border-radius: inherit } .cd-nav-trigger span::before { top: -9px } .cd-nav-trigger span::after { bottom: -9px } @media only screen and (min-width: 800px) { .cd-nav-trigger { display:none } } .cd-vertical-nav { position: fixed; z-index: 1; right: 5%; bottom: 30px; width: 90%; max-width: 400px; max-height: 90%; overflow-y: auto; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transition: -webkit-transform .2s; -moz-transition: -moz-transform .2s; transition: transform .2s; border-radius: .25em; background-color: rgba(234,242,227,0.9) } .cd-vertical-nav a { display: block; padding: 1em; color: #3a2c41; font-weight: bold; border-bottom: 1px solid rgba(58,44,65,0.1) } .cd-vertical-nav a.active { color: #c0a672 } .cd-vertical-nav.open { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-overflow-scrolling: touch } .cd-vertical-nav.open+.cd-nav-trigger { background-color: transparent } .cd-vertical-nav.open+.cd-nav-trigger span { background-color: rgba(58,44,65,0) } .cd-vertical-nav.open+.cd-nav-trigger span::before,.cd-vertical-nav.open+.cd-nav-trigger span::after { height: 3px; width: 20px; border-radius: 0; left: -8px } .cd-vertical-nav.open+.cd-nav-trigger span::before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: 1px } .cd-vertical-nav.open+.cd-nav-trigger span::after { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); bottom: 0 } @media only screen and (min-width: 800px) { .cd-vertical-nav { right:0; top: 0; bottom: auto; height: 100vh; width: 90px; max-width: none; max-height: none; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); background-color: transparent; display: table } .cd-vertical-nav::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); -webkit-transition: -webkit-transform .4s; -moz-transition: -moz-transform .4s; transition: transform .4s } .no-touch .cd-vertical-nav:hover::before,.touch .cd-vertical-nav::before { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0) } .cd-vertical-nav ul { display: table-cell; vertical-align: middle; text-align: center } .cd-vertical-nav a { position: relative; padding: 3em 0 0; margin: 1.4em auto; border-bottom: 0; font-size: 1.2rem; color: #eaf2e3 } .cd-vertical-nav a.active { color: #eaf2e3 } .cd-vertical-nav a::before,.cd-vertical-nav a::after { content: ''; position: absolute; left: 50%; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0) } .cd-vertical-nav a::before { top: 0; height: 32px; width: 32px; border-radius: 50%; background: #eaf2e3; -webkit-transform: translateX(-50%) scale(0.25); -moz-transform: translateX(-50%) scale(0.25); -ms-transform: translateX(-50%) scale(0.25); -o-transform: translateX(-50%) scale(0.25); transform: translateX(-50%) scale(0.25); -webkit-transition: -webkit-transform .4s,background-color .2s; -moz-transition: -moz-transform .4s,background-color .2s; transition: transform .4s,background-color .2s } .cd-vertical-nav a::after { opacity: 0; top: 8px; height: 16px; width: 16px; background: url(../img/cd-nav-icons.svg) no-repeat; -webkit-transform: translateX(-50%) scale(0); -moz-transform: translateX(-50%) scale(0); -ms-transform: translateX(-50%) scale(0); -o-transform: translateX(-50%) scale(0); transform: translateX(-50%) scale(0); -webkit-transition: -webkit-transform .4s 0s,opacity .1s .3s; -moz-transition: -moz-transform .4s 0s,opacity .1s .3s; transition: transform .4s 0s,opacity .1s .3s } .cd-vertical-nav a.active::before,.no-touch .cd-vertical-nav a:hover::before { background-color: #c0a672 } .cd-vertical-nav li:first-of-type a::after { background-position: 0 -48px; -webkit-transform: translateX(-50%) translateY(4.5em) scale(0.01); -moz-transform: translateX(-50%) translateY(4.5em) scale(0.01); -ms-transform: translateX(-50%) translateY(4.5em) scale(0.01); -o-transform: translateX(-50%) translateY(4.5em) scale(0.01); transform: translateX(-50%) translateY(4.5em) scale(0.01) } .cd-vertical-nav li:first-of-type a::before { -webkit-transform: translateX(-50%) translateY(4.5em) scale(0.25); -moz-transform: translateX(-50%) translateY(4.5em) scale(0.25); -ms-transform: translateX(-50%) translateY(4.5em) scale(0.25); -o-transform: translateX(-50%) translateY(4.5em) scale(0.25); transform: translateX(-50%) translateY(4.5em) scale(0.25) } .cd-vertical-nav li:nth-of-type(2) a::after { background-position: 0 -32px; -webkit-transform: translateX(-50%) translateY(1.5em) scale(0.01); -moz-transform: translateX(-50%) translateY(1.5em) scale(0.01); -ms-transform: translateX(-50%) translateY(1.5em) scale(0.01); -o-transform: translateX(-50%) translateY(1.5em) scale(0.01); transform: translateX(-50%) translateY(1.5em) scale(0.01) } .cd-vertical-nav li:nth-of-type(2) a::before { -webkit-transform: translateX(-50%) translateY(1.5em) scale(0.25); -moz-transform: translateX(-50%) translateY(1.5em) scale(0.25); -ms-transform: translateX(-50%) translateY(1.5em) scale(0.25); -o-transform: translateX(-50%) translateY(1.5em) scale(0.25); transform: translateX(-50%) translateY(1.5em) scale(0.25) } .cd-.........完整代码请登录后点击上方下载按钮下载查看
网友评论0