<div id="floorNav">
? ? <ul>
? ? ? <li>1F<span>服飾</span></li>
? ? ? <li>2F<span>美妝</span></li>
? ? ? <li>3F<span>手機</span></li>
? ? ? <li>4F<span>家電</span></li>
? ? ? <li>5F<span>數碼</span></li>
? ? ? <li>6F<span>運動</span></li>
? ? ? <li>7F<span>居家</span></li>
? ? ? <li>8F<span>母嬰</span></li>
? ? ? <li>9F<span>食品</span></li>
? ? ? <li>10F<span>圖書</span></li>
? ? ? <li>11F<span>服務</span></li>
? ? </ul>
? </div>
? <div id="header"></div>
? <div id="content">
? ? <ul>
? ? ? <li style="background: #8b0000;">服飾</li>
? ? ? <li style="background: #123;">美妝</li>
? ? ? <li style="background: #667;">手機</li>
? ? ? <li style="background: #558;">家電</li>
? ? ? <li style="background: #900;">數碼</li>
? ? ? <li style="background: #456;">運動</li>
? ? ? <li style="background: #789;">居家</li>
? ? ? <li style="background: #234;">母嬰</li>
? ? ? <li style="background: #567;">食品</li>
? ? ? <li style="background: #887;">圖書</li>
? ? ? <li style="background: #980;">服務</li>
? ? </ul>
</div>

<style type="text/css">
? ? body,
? ? ul,
? ? li {
? ? ? padding: 0;
? ? ? margin: 0;
? ? }

? ? li {
? ? ? list-style: none;
? ? }

? ? #floorNav {
? ? ? display: none;
? ? ? position: fixed;
? ? ? top: 100px;
? ? ? left: 50px;
? ? ? width: 32px;
? ? ? border: 1px solid #cecece;
? ? }

? ? #floorNav li {
? ? ? position: relative;
? ? ? width: 32px;
? ? ? height: 32px;
? ? ? border-bottom: 1px solid #cecece;
? ? ? text-align: center;
? ? ? line-height: 32px;
? ? ? font-size: 12px;
? ? }

? ? #floorNav span {
? ? ? display: none;
? ? ? position: absolute;
? ? ? top: 0;
? ? ? left: 0;
? ? ? width: 32px;
? ? ? height: 32px;
? ? ? background: red;
? ? ? color: white;
? ? }

? ? #floorNav li:hover span,
? ? #floorNav li.hover span {
? ? ? display: block;
? ? ? cursor: default;
? ? }

? ? #floorNav li:last-child {
? ? ? border-bottom: none;

? ? }

? ? #header,
? ? #footer {
? ? ? width: 1000px;
? ? ? height: 1000px;
? ? ? background: darkgoldenrod;
? ? ? margin: 0 auto;
? ? }

? ? #content li {
? ? ? width: 1000px;
? ? ? height: 600px;
? ? ? margin: 0 auto;
? ? ? font-size: 40px;
? ? ? text-align: center;
? ? ? line-height: 600px;
? ? }
</style>

<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
? <script type="text/javascript">
? ? $(function () {
? ? ? var flag = true;
? ? ? $(window).scroll(function () {
? ? ? ? if (flag) {
? ? ? ? ? var t = $(this).scrollTop();
? ? ? ? ? if (t > 500) {
? ? ? ? ? ? $("#floorNav").fadeIn();
? ? ? ? ? } else {
? ? ? ? ? ? $("#floorNav").fadeOut();
? ? ? ? ? }
? ? ? ? ? $("#content li").each(function () {
? ? ? ? ? ? if (t >= $(this).offset().top - $(this).outerHeight() / 2) {
? ? ? ? ? ? ? var index = $(this).index();
? ? ? ? ? ? ? $("#floorNav li")
? ? ? ? ? ? ? ? .eq(index)
? ? ? ? ? ? ? ? .addClass("hover")
? ? ? ? ? ? ? ? .siblings()
? ? ? ? ? ? ? ? .removeClass("hover");
? ? ? ? ? ? }
? ? ? ? ? });
? ? ? ? }
? ? ? });

? ? ? $("#floorNav li").click(function () {
? ? ? ? flag = false;
? ? ? ? var index = $(this).index();
? ? ? ? $("html,body").animate(
? ? ? ? ? {
? ? ? ? ? ? scrollTop: $("#content li").eq(index).offset().top,
? ? ? ? ? },
? ? ? ? ? () => {
? ? ? ? ? ? flag = true;
? ? ? ? ? }
? ? ? ? );
? ? ? ? $(this).addClass("hover").siblings().removeClass("hover");
? ? ? });
? ? });
</script>