Current Nav position without scrolling

Question

I get the following error in my Firefox console, accompanied by trembling animations:

This site uses the scroll effect of positioning. This may not work well with asynchronous panning;

I checked the Firefox support post , but I have not seen any examples relevant to my scenario.

I have a snap-based navigation menu that indicates where the visitor is on the page. Here is the jQuery I use for this:

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

Basically, I check the scroll position relative to the anchor position and toggle the CSS class if the anchor is nearby. CSS handles the transition effect.

Is there any other way to achieve this that does not require the scroll effect of the positioning effect and leads to a jittery scroll?

Answer 1

Here is an attempt to approximate your target ( Demo ). Code inspired by Bootstrap ScrollSpy modified to suit your requirements. Please let me now if this works for you:

 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> 

For a better experience, run the snippet in full screen.