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/reset.min.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <style> /*** Mixins & Default Styles ***/ * { box-sizing: border-box; margin: 0; padding: 0; } body { overflow-x: hidden; overflow-y: scroll; } /*** Color Variables ***/ /*** Centering Hack ***/ /*** Header Styles ***/ header { width: 100vw; height: 100vh; background: #5661f2; display: flex; } /*** Navigation Styles ***/ nav { width: 100vw; height: 160px; background: #46b2f0; display: grid; grid-template-columns: 1fr 1fr; position: fixed; z-index: 10; transition: all 0.3s; } nav.navShadow { box-shadow: 0 4px 30px -5px rgba(0, 0, 0, 0.2); height: 100px; } nav.navShadow #word-mark { opacity: 0; } #brand, #menu, ul { display: flex; align-items: center; } #brand { padding-left: 40px; } #logo { width: 55px; height: 55px; background: #fff; border-radius: 50%; cursor: pointer; } #word-mark { width: 120px; height: 20px; background: #fff; border-radius: 90px; margin-left: 20px; opacity: 1; transition: all 0.3s; } /*** Menu Styles ***/ #menu { justify-content: flex-end; padding-right: 40px; } li { margin-left: 20px; } li a { width: 80px; height: 20px; background: #fff; display: block; border-radius: 90px; } #menu-toggle { width: 55px; height: 55px; background: #2ea8ee; display: flex; justify-content: center; align-items: center; border-radius: 50%; cursor: pointer; display: none; } #menu-toggle:hover .bar { width: 25px; } #menu-toggle.closeMenu .bar { width: 25px; } #menu-toggle.closeMenu .bar:first-child { transform: translateY(7px) rotate(45deg); } #menu-toggle.closeMenu .bar:nth-child(2) { transform: scale(0); } #menu-toggle.closeMenu .bar:last-child { transform: translateY(-7px) rotate(-45deg); } .bar { width: 25px; height: 2px; background: #fff; transition: 0.3s ease-in-out; } .bar:nth-child(2) { width: 20px; margin: 5px 0; } .bar:last-child { width: 15px; } /*** Hero Section Styles ***/ #hero-section { width: 100vw; height: calc(100vh - 160px); display: flex; justify-content: center; align-items: center; margin-top: 160px; } #head-line { width: 520px; height: 30px; background: #fff; border-radius: 90px; position: relative; } #head-line:before, #head-line:after { content: ""; height: 30px; border-radius: 90px; } #head-line:before { width: 360px; background: #fff; position: absolute; top: -60px; left: 50%; transform: translate(-50%, 0); } #head-line:after { width: 200px; background: #fff; position: absolute; left: 50%; bottom: -60px; transform: translate(-50%, 0); } /*** Section Styles ***/ section { width: 100vw; height: calc(100vh - 100px); display: flex; justify-content: center; } section:nth-child(odd) { background: #fa6c98; } section:nth-child(even) { background: #79edfc; } #heading { width: 120px; height: 20px; background: #fff; border-radius: 90px; margin-t.........完整代码请登录后点击上方下载按钮下载查看
网友评论0