Posizione attuale Nav Senza Scroll-Linked posizionamento

Question

sto ottenendo il seguente errore nel mio console Firefox, accompagnati da animazioni nervosi:

Questo sito sembra utilizzare un effetto di posizionamento scroll-linked. Questo può non funziona bene con panning asincrono;

Ho controllato Firefox's support post, ma non ho visto nessun esempio pertinente al mio scenario.

Ho un menu di navigazione basato su ancoraggio che indica dove sulla pagina è attualmente il visitatore. Ecco l'jQuery che sto usando per gestire questa situazione:

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

In sostanza, sto controllando la posizione di scorrimento contro la posizione dell'ancora, e commutando una classe CSS, se l'ancora si trova nelle vicinanze. Il CSS gestisce l'effetto di transizione.

C'è un altro modo per ottenere ciò che non richiede un effetto di posizionamento a scorrimento e provoca uno scorrimento nervoso?

Answer 1

Ecco un tentativo di approssimare l'obiettivo (Demo). Il codice è ispirato a Bootstrap ScrollSpy è stato modificato per soddisfare le tue esigenze. Per favore fatemi ora se questo funziona per voi:

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) { 
 
    \t activeTarget = target; 
 
    clear(); 
 
    \t $(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(); 
 
    } 
 
    
 
\t \t 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($) { 
 
\t 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>

Per una migliore esperienza si prega di eseguire il frammento in modalità pagina intera.