markdown 选项卡式导航（滚动更改）

Posted 2021-05-06

<div id='tabs'>
  <a class='circle active' href='#zero' id='top'>
    <i class='fa fa-arrow-up'></i>
    <div class='text'>Top</div>
  </a>
  <a class='circle' href='#one' id='functions'>
    <i class='fa fa-cogs'></i>
    <div class='text'>Settings</div>
  </a>
  <a class='circle' href='#two' id='description'>
    <i class='fa fa-camera-retro'></i>
    <div class='text'>Gallery</div>
  </a>
  <a class='circle' href='#three' id='details'>
    <i class='fa fa-info'></i>
    <div class='text'>Details</div>
  </a>
  <a class='circle' href='#four' id='specs'>
    <i class='fa fa-wrench'></i>
    <div class='text'>Specifications</div>
  </a>
  <a class='circle' href='#five' id='components'>
    <i class='fa fa-dropbox'></i>
    <div class='text'>Components</div>
  </a>
  <a class='circle' href='#six' id='opinions'>
    <i class='fa fa-comments'></i>
    <div class='text'>Comments</div>
  </a>
</div>
<div id='thing'>
  <div id='zero'>
    Top
  </div>
  <div id='one'>
    Functions
  </div>
  <div id='two'>
    Description
  </div>
  <div id='three'>
    Details
  </div>
  <div id='four'>
    Specifications
  </div>
  <div id='five'>
    Components
  </div>
  <div id='six'>
    Comments
  </div>
  <div id='bottom'>
    Bottom
  </div>
</div>

$('.circle').on('click', function(e) {
  e.preventDefault();
  $('.circle').removeClass('active');

  $this = $(this);

  $('html, body').animate({
    scrollTop: $(($this).attr('href')).position().top
  }, 'slow');
})

$(window).on('scroll', function() {
  var scrollY = $(window).scrollTop();
  for (var j = offsetArray.length - 1; j >= 0; j--) {
    if (scrollY <= offsetArray[j + 1]) {
      $('.circle').removeClass('active');
      $($('#tabs').children('.circle')[j]).addClass('active');
    }
  }
})

$(document).ready(function(e) {
  offsetArray = [];

  for (var i = $('#thing').children().length - 1; i >= 0; i--) {
    var offsetTopVal = $('#thing').children()[i].offsetTop;
    offsetArray.push(offsetTopVal);
  };

  offsetArray.reverse();

})

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700);

body{font-family:Roboto; background:#303040; }

/* TMP */
#thing div {
  height: 400px;
  line-height: 70px;
  padding-left: 75px;
  position: relative;
}
#thing div:nth-child(odd) {
  background: #dbdbdb;
  color:#000;
}
#thing div:nth-child(even) {
  color:#f0f0f0;
}
/* TABS */
#tabs .circle:nth-child(2) {
  background: #222;
}

#tabs .circle:nth-child(2).active:after {
  border-left: 20px solid #222;
}

#tabs .circle:nth-child(3) {
  background: #444;
}

#tabs .circle:nth-child(3).active:after {
  border-left: 20px solid #444;
}

#tabs .circle:nth-child(4) {
  background: #555;
}

#tabs .circle:nth-child(4).active:after {
  border-left: 20px solid #555;
}

#tabs .circle:nth-child(5) {
  background: #666;
}

#tabs .circle:nth-child(5).active:after {
  border-left: 20px solid #666;
}

#tabs .circle:nth-child(6) {
  background: #777;
}

#tabs .circle:nth-child(6).active:after {
  border-left: 20px solid #777;
}

#tabs .circle:nth-child(7) {
  background: #999;
}

#tabs .circle:nth-child(7).active:after {
  border-left: 20px solid #999;
}

#tabs {
  top: 0px;
  position: fixed;
  zoom:.8;
  z-index: 9;
}
#tabs .circle {
  width: 50px;
  height: 50px;
  border-radius: 25px;
  color: #fff;
  line-height: 50px;
  font-size: 25px;
  -webkit-transition: all 0.25s ease-in-out;
          transition: all 0.25s ease-in-out;
  margin: 10px;
  display: block;
  overflow: hidden;
  text-decoration: none;
}
#tabs .circle:first-child {
  background: black;
}
#tabs .circle:first-child.active:after {
  border-left: 20px solid black;
}
#tabs .circle.active {
  overflow: visible;
}
#tabs .circle.active:after {
  content: "";
  position: relative;
  display: block;
  top: -45px;
  left: 40px;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  clear: both;
}
#tabs .circle.active .text {
  display: none !important;
}
#tabs .circle:hover {
  width: auto !important;
}
#tabs .circle .fa {
  text-align: center;
  line-height: 50px;
}
#tabs .circle .fa:before {
  display: inline-block;
  width: 50px;
}
#tabs .circle .text {
  display: inline-block;
  padding-right: 25px;
  font-weight: 200;
  font-size: 20px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />

Tabbed Navigation (Changes on Scroll)
-------------------------------------
Anchored Tabbed Navigation that is updated based on scrolling position

A [Pen](https://codepen.io/slstudios/pen/ZGONwr) by [Steve](https://codepen.io/slstudios) on [CodePen](https://codepen.io).

[License](https://codepen.io/slstudios/pen/ZGONwr/license).