Прокрутка одной страницы с помощью подразделов

Question

Я искал плагин jquery для обработки прокручиваемого сайта на одну страницу, например, прокрутки в стиле яблока. Есть несколько вариантов (например, скриншот и alton), которые близки к тому, что мне нужно.

Кроме того, мне также нужны подразделы и точечные меню, чтобы представить их так, чтобы появлялись дополнительные точки (в другом стиле), которые выделяются при прокрутке, а затем снова скрываются, как только появляется следующий основной раздел.

Есть ли такое решение уже существует? Я уже спрашивал о создании страницы, и автор говорит, что плагин не поддерживает эту функциональность. Я думаю, что JQuery или Javascripting для создания этой функциональности могут оказаться вне моего опыта, но приветствуем любые ссылки на существующий код или сайты, которые имеют это, или предложения о том, как это можно закодировать.

Answer 1

Это работает?

$(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;} 
 
a {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 a {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