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

Popular posts from this blog

android - Gradle sync Error:Configuration with name 'default' not found -

java - Andrioid studio start fail: Fatal error initializing 'null' -

html - jQuery UI Sortable - Remove placeholder after item is dropped -