7

我的 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 处理过渡效果。

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

4

1 回答 1

0

这是一个近似您的目标的尝试（演示）。代码的灵感来自于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>

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

于 2016-07-01T05:07:53.500 回答