Question

我一直在寻找一个jquery插件来处理像苹果风格的滚动一样的单页滚动网站。有一些选项（例如pagepiling和alton）接近我需要的选项。

此外，我还需要子部分和点菜单来表示它们，以便在滚动时出现额外的点（以不同的样式）并突出显示，然后在下一个主要部分进入视图后再次隐藏。

这样的解决方案是否已经存在？我已经查询了打包页面，作者说该插件不支持该功能。我认为用于构建该功能的JQuery或Javascripting可能超出了我的专业知识，但欢迎任何具有此功能的现有代码或网站的链接，或者有关如何编码的建议。

Answer 1

这有用吗？

＆＃13;

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

＆＃13;

* {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;}

＆＃13;

<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>

＆＃13;

JSBin：http://jsbin.com/rekobofami，http://output.jsbin.com/rekobofami

一页滚动子节

1 个答案: