Optimizing jQuery page layout changes

Question

I have this code and it works exactly the way I want. The menu bar is at the top and recognizes the section in which it is located. You can click links in the yellow menu to navigate between sections.

Demo: http://jsfiddle.net/spadez/2atkZ/9/ and http://jsfiddle.net/spadez/2atkZ/9/embedded/result/

$(function () {
    var $select = $('#select');
    var $window = $(window);
    var isFixed = false;
    var init = $select.length ? $select.offset().top : 0;

    $window.scroll(function () {
        var currentScrollTop = $window.scrollTop();
        if (currentScrollTop > init && isFixed === false) {
            isFixed = true;
            $select.css({
                top: 0,
                position: 'fixed'
            });
            $('body').css('padding-top', $select.height());
        } else if (currentScrollTop <= init) {
            isFixed = false;
            $select.css('position', 'relative');
            $('#select span').removeClass('active');
            $('body').css('padding-top', 0);
        } 


        //active state in menu
        $('.section').each(function(){
            var eleDistance = $(this).offset().top;
            if (currentScrollTop >= eleDistance-$select.outerHeight()) {
                var makeActive = $(this).attr('id');
                $('#select span').removeClass('active');
                $('#select span.' + makeActive).addClass('active');
            }
        });
    });

    $(".nav").click(function (e) {
        var divId = $(this).data('sec');
        $('body').animate({
            scrollTop: $(divId).offset().top - $select.height()
        }, 500);
    });    
});

However, the code itself becomes pretty weak as soon as you start putting any content into fields. According to the help I received, I repeatedly change the page layout properties using the page layout properties and queries in the scroll handler, thereby causing a large number of forced layouts.

A Tibos user said that:

, ( ).

- , ?

Answer 1

- : http://codepen.io/vsync/pen/Kgcoa

KEY , select , , FIXED , - , . CSS. jQuery 1.11 , , , , . . , for, jquery each , for - each. , , , , , DOM...

, , , , , , getBoundingClientRect . , .

var pos,
    $el = $('#select'),
    navItems = $el.find('.nav'),
    menuHeight = $el[0].clientHeight,
    scrollY,
    sections = $('.section').toArray(),  // cache sections elements
    pointOfAttachment = $('.jumbo')[0].clientHeight - menuHeight;

// Bind events
$(window).on('scroll.nav', updateNav)
         .on('resize.nav', updateNav);


function updateNav(){
    scrollY = window.pageYOffset || document.documentElement.scrollTop;

    for( var i = sections.length; i--; ){
        if( sections[i].getBoundingClientRect().top < 0 ){
            navItems.filter('.' + sections[i].id).addClass('active').siblings().removeClass('active');
            break;
        }
        navItems.removeClass('active');
    }

    if( scrollY > pointOfAttachment )
        $el.addClass('fixed');
    else
        $el.removeClass('fixed');
}

?

, DOM , . , DOM, , .

Answer 2

scroll. 20 . . underscore .

, lagg, - . $('body') , , .