主要功能

• 牢固中部导航栏（转动到触发）

• 转动后可视内容和高亮题目一致（许多网站并未做到这一点）

• 点击导航题目疾速定位到内容

• 可自定义当触发题目时的题目款式

基于JQuery完成

(function() {
  $.fn.smint = function(fxd) {
    var lastScrollTop, menuHeight,
        myOffset, mySelector, optionLocs,
        scrollSpeed, settings, smint, smintA,
        smintH, smintLi;
    settings = $.extend({
      'scrollSpeed': 500,
      'mySelector': 'div'
    });
    $(this).addClass('smint');
    optionLocs = new Array;
    lastScrollTop = 0;
    menuHeight = $('.smint').height();
    smint = $('.smint');
    smintLi = $('.smint li');
    smintA = $('.smint a');
    smintH = smintLi || smintA;
    myOffset = smint.height();
    if (settings.scrollSpeed) {
      scrollSpeed = settings.scrollSpeed;
    }
    if (settings.mySelector) {
      mySelector = settings.mySelector;
    }
    return smintH.each(function(index) {
      var id, stickyMenu, stickyTop;
      id = $(this).find('a').attr('href').split('#')[1];
      if (!$(this).hasClass('extLink')) {
        $(this).attr('id', id);
      }
      optionLocs.push(Array($(mySelector + '.' + id).position().top - menuHeight, $(mySelector + '.' + id).height() + $(mySelector + '.' + id).position().top, id));
      stickyTop = smint.offset().top;
      stickyMenu = function(direction) {
        var scrollTop;
        scrollTop = $(window).scrollTop() + myOffset;
        if (scrollTop > stickyTop + myOffset) {
          smint.css({
            'position': 'fixed',
            'top': 0
          }).addClass('fxd');
        } else {
          smint.css('position', 'relative').removeClass('fxd');
        }
        if (optionLocs[index][0] <= scrollTop && scrollTop <= optionLocs[index][1]) {
          if (direction === 'up') {
            $('#' + id).addClass('active');
            $('#' + optionLocs[index + 1][2]).removeClass('active');
          } else if (index > 0) {
            $('#' + id).addClass('active');
            $('#' + optionLocs[index - 1][2]).removeClass('active');
          } else if (direction === void 0) {
            $('#' + id).addClass('active');
          }
          $.each(optionLocs, function(i) {
            if (id !== optionLocs[i][2]) {
              $('#' + optionLocs[i][2]).removeClass('active');
            }
          });
        }
      };
      stickyMenu();
      $(window).scroll(function() {
        var direction, st;
        st = $(this).scrollTop() + myOffset;
        if ($(window).scrollTop() + $(window).height() === $(document).height()) {
          smintH.removeClass('active');
          $('.smint li:not(\'.extLink\'):last').addClass('active');
        } else {
          smintH.last().removeClass('active');
        }
        if (st > lastScrollTop) {
          direction = 'down';
        } else if (st < lastScrollTop) {
          direction = 'up';
        }
        lastScrollTop = st;
        stickyMenu(direction);
      });
      $(this).on('click', function(e) {
        var myOffset;
        var goTo, hash;
        myOffset = smint.height();
        e.preventDefault();
        hash = $(this).find('a').attr('href').split('#')[1];
        goTo = $(mySelector + '.' + hash).offset().top - myOffset;
        $('html, body').stop().animate({
          scrollTop: goTo
        }, scrollSpeed);
        if ($(this).hasClass('extLink')) {
          return false;
        }
      });
    });
  };
  $.fn.smint.defaults = {
    'scrollSpeed': 500,
    'mySelector': 'div'
  };
})(jQuery);

http://www.outyear.co.uk/smint/

根据此网站的代码 稍作修正

运用体式格局

1. js中声明挪用比方 导航的类“navbar-wrapper-middle”

$('.navbar-wrapper-middle').smint('fxd')
//fxd是本身css文件里按本身志愿定义好的类
//即导航栏牢固后的款式