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

Posted 2023-03-06

【中文标题】没有滚动链接定位的当前导航位置

【英文标题】：Current Nav Position Without Scroll-Linked Positioning

【发布时间】：2016-09-30 09:11:41

【问题描述】：

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

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

【问题讨论】：

考虑共享一个代码 sn-p 并重现错误...

@ShrameeSrivastav 我想你在this 帖子中找到了一个代码 sn-p...

$('.form_group').not('.sub_group') 返回了多少个元素？即，是否因为需要太多处理而感到紧张？

@TonyHinkle 也许最多 10 或 15 个。

如果没有完整的工作示例，很难想出一个解决方法。您可以在 jsfiddle.net 上创建一个示例吗？在我的脑海中，我只能问是否使用scrollStop 事件就足够了，或者只是在一两秒的时间间隔内不断地运行它。这当然不是一个很好的解决方案，但如果它不使用太多资源，它可能是让它发挥作用的一种解决方法。当您使用滚动事件时，它会如此迅速地触发......

【参考方案1】：

这是一个近似您的目标的尝试 (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, 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>

为了获得更好的体验，请在全页模式下运行 sn-p。

【讨论】：

谢谢，让我在我的环境中测试一下，看看它是否能解决问题。似乎遵循@Fisnik 关于将选择器存储在“滚动”功能之外的评论。