Question

我的Firefox控制台出现以下错误，并伴有抖动动画：

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

我检查了Firefox's support post，但我没有看到任何与我的情景相关的示例。

我有一个基于锚点的导航菜单，指示访问者当前在页面上的位置。这是我用来处理这个问题的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

这是尝试近似您的目标（Demo）。代码受Bootstrap ScrollSpy启发，经过修改以满足您的要求。如果这对您有用，请现在就告诉我：

＆＃13;

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();
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

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

1 个答案: