模擬a標籤的hash---中部導航

---

主要功能

---

• 固定中部導航欄（滾動到觸發）

• 滾動後可視內容和高亮標題一致（不少網站並未作到這一點）

• 點擊導航標題快速定位到內容

• 可自定義當觸發標題時的標題樣式

基於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文件裏按本身意願定義好的類
//即導航欄固定後的樣式