html设置

<div class="content">
  <div id="menu" class="rightMune">
    <ul>
      <li><a href="#item1" class="current">1F 男装</a></li>
      <li><a href="#item2">2F 女装</a></li>
      <li><a href="#item3">3F 美妆</a></li>
      <li><a href="#item4">4F 数码</a></li>
      <li><a href="#item5">5F 母婴</a></li>
    </ul>
  </div>
  <div id="content" class="contInfo">
    <div id="item1" class="item">
      <h2>1F 男装</h2>
      <ul>
        <li>
          <a href="#"><img src="" alt=""/></a>
        </li>
        <!-- 若干个li -->
      </ul>
    </div>
    <div id="item2" class="item">
      <h2>2F 女装</h2>
      <ul>
        <li>
          <a href="#"><img src="" alt=""/></a>
        </li>
        <!-- 若干个li -->
      </ul>
    </div>
    <div id="item3" class="item">
      <h2>3F 美妆</h2>
      <ul>
        <li>
          <a href="#"><img src="" alt=""/></a>
        </li>
        <!-- 若干个li -->
      </ul>
    </div>
    <div id="item4" class="item">
      <h2>4F 数码</h2>
      <ul>
        <li>
          <a href="#"><img src="" alt=""/></a>
        </li>
        <!-- 若干个li -->
      </ul>
    </div>
    <div id="item5" class="item">
      <h2>5F 母婴</h2>
      <ul>
        <li>
          <a href="#"><img src="" alt=""/></a>
        </li>
        <!-- 若干个li -->
      </ul>
    </div>
  </div>
</div>

css样式

@charset "UTF-8";
$blueColor: #0088bb;
li {
  list-style: none;
}
//右侧menu设置
.rightMune {
  position: fixed;
  left: 50%;
  margin-left: 400px;
  top: 100px;
  ul {
    li {
      a {
        display: block;
        margin: 5px 0;
        font-size: 14px;
        font-weight: bold;
        color: #333;
        width: 80px;
        height: 50px;
        line-height: 50px;
        text-decoration: none;
        text-align: center;

        &:hover,
        &.current {
          color: #fff;
          background: $blueColor;
        }
      }
    }
  }
}


/*content内容展示设置*/
.contInfo {
  width: 800px;
  margin: 0 auto;
  padding: 20px;

  .item {
    padding: 20px;
    margin-bottom: 20px;
    border: 1px dotted $blueColor;
    height: 300px;

    h2 {
      font-size: 16px;
      font-weight: bold;
      border-bottom: 2px solid $blueColor;
      margin-bottom: 10px;
    }

    li {
      display: inline;
      margin-right: 10px;

      a {
        img {
          width: 230px;
          height: 230px;
          border: none;
        }
      }
    }
  }
}

jQuery设置滚动事件

//鼠标滚动事件
      $(window).scroll(function () {
        var scrollTop = $(document).scrollTop(); //滚动条距离顶部的位置
        var documentHeight = $(document).height(); //文档整体高度
        var windowHeight = $(window).height(); //可视窗口的高度

        var contentItems = $("#content").find(".item");
        var currentItem = "";

        if (scrollTop + windowHeight == documentHeight) {
          currentItem = "#" + contentItems.last().attr("id"); //获取最后一个
        } else {
          contentItems.each(function () {
            var contentItem = $(this);
            var offsetTop = contentItem.offset().top;
            if (scrollTop > offsetTop - 100) { //此处的200视具体情况自行设定，因为如果不减去一个数值，在刚好滚动到一个div的边缘时，菜单的选中状态会出错，比如，页面刚好滚动到第一个div的底部的时候，页面已经显示出第二个div，而菜单中还是第一个选项处于选中状态
              currentItem = "#" + contentItem.attr("id");
            }
          });
        }
        if (currentItem != $("#menu").find(".current").attr("href")) {
          $("#menu").find(".current").removeClass("current");
          $("#menu").find("[href=" + currentItem + "]").addClass("current");
        }
      });

页面效果