jquery+css实现文章底部滚动章节导航效果代码
代码语言:html
所属分类:菜单导航
代码描述:jquery+css实现文章底部滚动章节导航效果代码,页面滚动,底部进度条调到响应章节上。
代码标签: jquery css 文章 底部 滚动 章节 导航
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700,300italic); @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,700,800); @import url(https://fonts.googleapis.com/css?family=Lora:400,400italic,700,700italic); @import url(https://fonts.googleapis.com/css?family=Unica+One); body { background-color: #2E334A; font-family: 'Lora', serif; margin: 0px; color: #B7B8BF; } a:link { text-decoration: none; color: #f15a24; } a:hover { text-decoration: none; color: #f15a24; } h1 { font-family: 'Open Sans Condensed'; text-transform: uppercase; font-weight: 700; font-size: 50px; margin-bottom: 0px; margin-top: 50px; color: #8EC9D2; line-height: 45px; } h3 { font-weight: 400; margin-top: 0px; font-style: oblique; font-size: 24px; margin-bottom: 25px; color: #8EC9D2; } p { margin-bottom: 50px; } .intro { font-family: 'Unica One'; color: #f15a24; } .container { max-width: 500px; margin: auto; padding: 50px; } .footer-scroller { position: fixed; bottom: 0; background-color: #272b3f; width: 100%; height: 60px; overflow-x: scroll; margin: 0px; } .section { background-color: #8EC9D2; color: #2E334A; width: 75px; height: 75px; display: flex; justify-content: center; align-items: center; float: left; position: relative; font-family: 'Open Sans'; font-weight: 800; font-size: 28px; line-height: 28px; margin-right: 10px; } .hipsum { font-size: 18px; line-height: 28px; font-style: oblique; margin-bottom: 200px; } .mover-bar { height: 100%; border-right:4px solid #f15a24; width: 0px; float: left; z-index:100; position: absolute; -webkit-transition: left 5s; transition: left 1s; } .liner { float: left; position: relative; width: 45%; height: 50%; border-bottom: 1px dotted yellow; } .bar-section { float: left; position: relative; width: 200px; height: 60px; border-right: 1px dotted #B7B8BF; transition-property: background-color; transition-duration: 1s; transition-timing-function: linear; } .number { background-color: #1b1e2c; font-size: 12px; color: #B7B8BF; width: 40px; display: inline-block; text-align: center; font-family: 'Unica One'; margin: 3px; padding: 3px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; box-shadow: inset 0 -6px 0 #f15a24; border-bottom: 0px solid #f15a24; transition: all .2s; } .number:hover { background-color: #8EC9D2; color: #2E334A; } @media screen and (max-width : 768px) { .number { display: none; } } </style> </head> <body> <!-- partial:index.partial.html --> <div class="container"> <div class="header"> <h1>Slidey</h1> <h3>a progress navigator bar</h3> </div> <div class="hipsum"> <p id="section0"> <div class="section">0</div><span class="intro">Chapter 0:</span> When you scroll down the page, the bar on the bottom of the page moves the amount you have read, from section to section. When you finish a section, the section at the bottom of the page changes color, indicating that you've read the section. You can also click on the chapter number to take you to that section. All of the sizing and scrolling is programmed in JavaScript, so you can change all the content and the bar at the bottom will be sized and linked accordingly. You just need to create the same number of sections as you create bars.</p> <p id="section1"><span class="section">1</span><span class="intro">Chapter 1: </span>Chambray cliche everyday carry, franzen gentrify DIY ethical yr bicycle rights art party kale chips kogi tattooed. Austin pinterest organic umami tote bag YOLO hella, authentic brunch shabby chic sartorial selfies. Cred kinfolk echo park cold-pressed. Church-key tousled synth humblebrag. Hashtag truffaut shoreditch 8-bit chia portland blue bottle, art party pinterest neutra paleo whatever slow-carb echo park small batch. Lomo twee fixie scenester, fanny pack bitters blue bottle. Pork belly hella forage vice, crucifix put a bird on it tousled bicycle rights craft beer lumbersexual ethical.</p> <p id="section2"><span class="section">2</span><span class="intro">Chapter 2: </span>Crucifix lumbersexual heirloom PBR&B, XOXO put a bird on it blog. Offal narwhal craft beer, art party quinoa salvia hashtag poutine williamsburg thundercats. Gochujang tacos chia, readymade venmo meditation bespoke truffaut. Brooklyn flexitarian before they sold out pinterest fap williamsburg gentrify four dollar toast keytar literally cold-pressed. Shabby chic cornhole lo-fi bushwick listicle, pitchfork chambray normcore trust fund 8-bit put a bird on it. Ugh tacos typewriter vegan, banh mi slow-carb chillwave kitsch DIY sriracha. Four loko DIY taxidermy, jean shorts direct trade normcore everyday carry.</p> <p id="section3"><span class="section">3</span><span class="intro">Chapter 3: </span>Retro schlitz XOXO green juice, affogato echo park neutra 90's. Four loko tofu fashion axe, leggings fanny pack wolf vice. Direct trade forage mlkshk, kale chips VHS pickled pinterest kombucha skateboard brooklyn schlitz banh mi hella aesthetic locavore. Kinfolk vinyl heirloom polaroid, cliche microdosing single-origin coffee before they sold out fanny pack listicle everyday carry. Disrupt offal cray etsy marfa meggings fashion axe tousled sustainable. Affogato tote bag yr knausgaard semiotics. Neutra asymmetrical skateboard green juice.</p> <p id="section4"><span class="section">4</span><span class="intro">Chapter 4: </span>Next level organic banjo listicle, selvage hoodie banh mi mumblecore farm-to-table cornhole austin ramps keffiyeh ethical trust fund. DIY dreamcatcher bespoke, health goth church-key pickled meh echo park portland truffaut knausgaard meditation forage. Listicle godard asymmetrical bitters poutine church-key, vice offal YOLO food truck semiotics. Pug viral chillwave organic, four loko letterpress leggings occupy. Raw denim flexitarian DIY narwhal, lomo ramps crucifix mixtape ugh chartreuse knausgaard trust fund YOLO organic green juice. Small batch selfies quinoa distillery food truck authentic before they sold out, try-hard ramps humblebrag meditation sriracha. Flannel hammock mlkshk, bushwick tacos thundercats mixtape street art umami banh mi shoreditch seitan sartorial helvetica chambray.</p> <p id="section5"><span class="section">5</span><span class="intro">Chapter 5: </span>Slow-carb cliche vinyl, meh pug etsy microdosing bitters crucifix cardigan kogi plaid retro williamsburg. Umami put a bird on it small batch viral. 8-bit direct trade schlitz, lo-fi cred meditation celiac hammock franzen. Pork belly tilde you probably haven't heard of them ramps kogi +1 humblebrag. Tote bag single-origin coffee pug, +1 man bun DIY roof party iPhone aesthetic tumblr authentic brooklyn seitan fanny pack organic. Man bun tofu shoreditch, try-hard cold-pressed drinking vinegar tousled shabby chic bespoke. Humblebrag +1 neutra, seitan poutine vegan blog keffiyeh squid hoodie chartreuse locavore bushwick everyday carry portland. Slow-carb cliche vinyl, meh pug etsy microdosing bitters crucifix cardigan kogi plaid retro williamsburg. Umami put a bird on it small batch viral. 8-bit direct trade schlitz, lo-fi cred meditation celiac hammock franzen. Pork belly tilde you probably haven't heard of them ramps kogi +1 humblebrag. Tote bag single-origin coffee pug, +1 man bun DIY roof party iPhone aesthetic tumblr authentic brooklyn seitan fanny pack organic. Man bun tofu shoreditch, try-hard cold-pressed drinking vinegar tousled shabby chic bespoke. Humblebrag +1 neutra, seitan poutine vegan blog keffiyeh squid hoodie chartreuse locavore bushwick everyday carry portland. Slow-carb cliche vinyl, meh pug etsy microdosing bitters crucifix cardigan kogi plaid retro williamsburg. Umami put a bird on it small batch viral. 8-bit direct trade schlitz, lo-fi cred meditation celiac hammock franzen. Pork belly tilde you probably haven't heard of them ramps kogi +1 humblebrag.</p> <p>Tote bag single-origin coffee pug, +1 man bun DIY roof party iPhone aesthetic tumblr authentic brooklyn seitan fanny pack organic. Man bun tofu shoreditch, try-hard cold-pressed drinking vinegar tousled shabby chic bespoke. Humblebrag +1 neutra, seitan poutine vegan blog keffiyeh squid hoodie chartreuse locavore bushwick everyday carry portland. Slow-carb cliche vinyl, meh pug etsy microdosing bitters crucifix cardigan kogi plaid retro williamsburg. Umami put a bird on it small batch viral. 8-bit direct trade schlitz, lo-fi cred meditation celiac hammock franzen. Pork belly tilde you probably haven't heard of them ramps kogi +1 humblebrag.</p> <p>Tote bag single-origin coffee pug, +1 man bun DIY roof party iPhone aesthetic tumblr authentic brooklyn seitan fanny pack organic. Man bun tofu shoreditch, try-hard cold-pressed drinking vinegar tousled shabby chic bespoke. Humblebrag +1 neutra, seitan poutine vegan blog keffiyeh squid hoodie chartreuse locavore bushwick everyday carry portland. Slow-carb cliche vinyl, meh pug etsy microdosing bitters crucifix cardigan kogi plaid retro williamsburg. Umami put a bird on it small batch viral. 8-bit direct trade schlitz, lo-fi cred meditation celiac hammock franzen. Pork belly tilde you probably haven't heard of them ramps k.........完整代码请登录后点击上方下载按钮下载查看
网友评论0