jquery怎么實現(xiàn)樓層滾動特效

這篇“jquery怎么實現(xiàn)樓層滾動特效”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內(nèi)容，內(nèi)容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“jquery怎么實現(xiàn)樓層滾動特效”文章吧。

效果圖

html

<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>數(shù)碼</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 >服飾</li>
      <li >美妝</li>
      <li >手機</li>
      <li >家電</li>
      <li >數(shù)碼</li>
      <li >運動</li>
      <li >居家</li>
      <li >母嬰</li>
      <li >食品</li>
      <li >圖書</li>
      <li >服務</li>
    </ul>
</div>

css

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

js

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

以上就是關于“jquery怎么實現(xiàn)樓層滾動特效”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關的知識內(nèi)容，請關注億速云行業(yè)資訊頻道。