jquery - One page scroll with subsections -
i have been looking jquery plugin handle one-page scrolling site apple-style scroll. there few options (such pagepiling , alton) near need.
in addition, need subsections , dot menus represent them dots (in different style) appear , highlighted scroll, , hidden again once next main section comes view.
does such solution exist? enquired pagepiling , author says plugin not support functionality. think jquery or javascripting build functionality may beyond expertise welcome links existing code or sites have this, or suggestions on how coded.
does work?
$(document).ready(function () { $(".page").css({ height: $(window).height(), lineheight: $(window).height() + "px" }); $("nav a").click(function () { thehref = $(this).attr("href"); $("html, body").animate({ scrolltop: $(thehref).offset().top }, 500); return false; }); });
* {font-family: 'segoe ui'; margin: 0; padding: 0; list-style: none;} {color: #33f; text-decoration: none;} body {overflow: hidden;} header {position: fixed; right: 0; top: 0;} header nav ul {padding: 5px; background: #ccf; border-radius: 0px 0px 0px 5px;} header nav ul li {display: inline-block;} header nav ul li {display: block; padding: 5px; border-radius: 5px;} header nav ul li a:hover {background-color: #99f; color: #fff;} .page {text-align: center;} #page-1 {background: #99f;} #page-2 {background: #9f9;} #page-3 {background: #f99;} #page-4 {background: #9cf;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <header> <nav> <ul> <li><a href="#page-1">page 1</a></li> <li><a href="#page-2">page 2</a></li> <li><a href="#page-3">page 3</a></li> <li><a href="#page-4">page 4</a></li> </ul> </nav> </header> <section> <div class="page" id="page-1">page 1</div> <div class="page" id="page-2">page 2</div> <div class="page" id="page-3">page 3</div> <div class="page" id="page-4">page 4</div> </section>
jsbin: http://jsbin.com/rekobofami, http://output.jsbin.com/rekobofami
Comments
Post a Comment