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

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

This site appears to use a scroll-linked positioning effect. This may
not work well with asynchronous panning;

我检查了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处理过渡效果.

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

解决方法

这是尝试近似你的目标( Demo).代码的灵感来自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,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,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,tristique ultricies eget soDales tempus vitae.</p>
</div>

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

原文地址：https://www.jb51.cc/jquery/177239.html