当前导航位置没有滚动链接定位

Question

我在Firefox控制台中出现以下错误,并伴有抖动动画:

此网站似乎使用滚动链接定位效果.这可能不适用于异步平移;

我检查了Firefox的支持帖子,但我没有看到任何与我的场景相关的示例.

我有一个基于锚点的导航菜单,指示访问者当前在页面上的位置.这是我用来处理这个的jQuery:

$(window).scroll(function(){

    var scrollpos   = $(this).scrollTop();
    var pad         = $('.panel_header').outerHeight();

    $('.form_group').not('.sub_group').each(function(i){

        if(scrollpos + $(window).height() == $(document).height()){

            $('ul.tabs li').removeClass('active_tab');
            $('ul.tabs li:last-child').addClass('active_tab');

            return false;

        } else if(scrollpos+pad < $(this).position().top+($(this).height()/2)){

            var id  = $(this).attr('id').replace('-table','-tab');
            var tab = $('#'+id);

            if(tab.length > 0){

                $('ul.tabs li').removeClass('active_tab');
                tab.addClass('active_tab');
            }
            return false;
        }
    });
});

基本上,我正在检查锚点位置的滚动位置,如果锚点在附近,则切换CSS类.CSS处理过渡效果.

有没有另一种方法来实现这一点,不需要滚动链接定位效果,导致抖动滚动？

Answer 1

这是接近您目标的尝试（演示）。该代码的灵感是经过Bootstrap ScrollSpy修改以满足您的要求。如果这对您有用，请现在告诉我：

var ScrollSpy = function() {

  var pad = 10;
  var offsets = [];
  var targets = [];
  var activeTarget = null;
  
  function init() {      
    $(document.body).find(".form_group").not(".sub_group").map(function () {    
      var $el   = $(this);
      var id  = $(this).attr('id').replace('-table','-tab');
      var $li = $('#'+id);
      
      return  [[$el.offset().top, $li[0]]];
    }).sort(function (a, b) { return a[0] - b[0] }).each(function () {
      offsets.push(this[0])
      targets.push(this[1])
    });
  };
  
  function activate(target) {
  	activeTarget = target;
    clear();
  	$(target).addClass('active_tab');
  };
  
  function clear() {
    $('ul.tabs li').removeClass('active_tab'); 
  };
  
  function getScrollHeight() {
    return window.scrollHeight || Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
  };
  
  function spy()  {  
    var scrollTop = $(window).scrollTop() + pad;
    var scrollHeight = getScrollHeight();
    var maxScroll = pad + scrollHeight - $(window).height();
    
    if (scrollTop >= maxScroll) {
      return activeTarget != (i = targets[targets.length - 1]) && activate(i);
    }
    
    if (activeTarget && scrollTop < offsets[0]) {
      activeTarget = null;
      return clear();
    }
    
		for (i = offsets.length; i--;) {
      activeTarget != targets[i]
        && scrollTop >= offsets[i]
        && (offsets[i + 1] === undefined || scrollTop < offsets[i + 1])
        && activate(targets[i]);
    }
  };
  
  $(window).scroll(spy);
  init();
  spy();
};

jQuery(function($) {
	ScrollSpy();
});

body, html {
  padding:0;
  margin:0;
  position: relative;
}
.panel_header {
  background-color:#ccc;
  padding:5px;
}

.tabs {
  padding:0;
  list-style:none;
  position:fixed;
  margin-left:-125px;
  left:50%;
  top:10px;
}
.tabs li {
  float:left;
  margin-left:4px;
}
.tabs li a {
  padding:4px 10px;
  background-color:white;
  border:1px solid #ccc;
}
.tabs li.active_tab a {
  background-color:red;
}

.form_group {
  border:1px solid #ccc;
  min-height:500px;
  padding:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header style="height:120px"></header>
<ul class="tabs">
  <li id="1-tab"><a href="#">Tab 1</a></li>
  <li id="2-tab"><a href="#">Tab 2</a></li>
  <li id="3-tab"><a href="#">Tab 3</a></li>
  <li id="4-tab"><a href="#">Tab 4</a></li>
</ul>

<div class="form_group" id="1-table">
  <h3 class="panel_header">Form_group 1 </h3>
  <p>Sodales velit. Aliquam libero duis duis nam, pariatur etiam neque ridiculus nisl libero, quis dis enim. Justo natoque, suscipit quam leo elit mauris tortor venenatis, morbi libero magna lorem enim. Sociis sed eu auctor inceptos nec, commodo quis nostra pretium turpis, semper sapien amet pretium aliquam, mauris faucibus euismod. Sed justo odio justo aliquet, natoque duis, tristique ultricies eget sodales tempus vitae.</p>
  
</div>
<div class="form_group" id="2-table">
  <h3 class="panel_header">Form_group 2 </h3>
  <p>Sodales velit. Aliquam libero duis duis nam, pariatur etiam neque ridiculus nisl libero, quis dis enim. Justo natoque, suscipit quam leo elit mauris tortor venenatis, morbi libero magna lorem enim. Sociis sed eu auctor inceptos nec, commodo quis nostra pretium turpis, semper sapien amet pretium aliquam, mauris faucibus euismod. Sed justo odio justo aliquet, natoque duis, tristique ultricies eget sodales tempus vitae.</p>
</div>
<div class="form_group" id="3-table">
  <h3 class="panel_header">Form_group 3 </h3>
  <p>Sodales velit. Aliquam libero duis duis nam, pariatur etiam neque ridiculus nisl libero, quis dis enim. Justo natoque, suscipit quam leo elit mauris tortor venenatis, morbi libero magna lorem enim. Sociis sed eu auctor inceptos nec, commodo quis nostra pretium turpis, semper sapien amet pretium aliquam, mauris faucibus euismod. Sed justo odio justo aliquet, natoque duis, tristique ultricies eget sodales tempus vitae.</p>
</div>
<div class="form_group" id="4-table">
  <h3 class="panel_header">Form_group 4 </h3>
  <p>Sodales velit. Aliquam libero duis duis nam, pariatur etiam neque ridiculus nisl libero, quis dis enim. Justo natoque, suscipit quam leo elit mauris tortor venenatis, morbi libero magna lorem enim. Sociis sed eu auctor inceptos nec, commodo quis nostra pretium turpis, semper sapien amet pretium aliquam, mauris faucibus euismod. Sed justo odio justo aliquet, natoque duis, tristique ultricies eget sodales tempus vitae.</p>
</div>

为了获得更好的体验，请以全页模式运行代码片段。