How to change the menu position using the scrollTo function?

Question

I’m making a site and created a menu with anchor that has the effect of scroll with Javascript. So far so good, the only problem is that I need that when Javascript goes into action the content always stay under the menu, but I did not find where to set this.

This is the code that goes directly on the page:

<script>
    $(document).ready(function(){

        /** 
         * This part does the "fixed navigation after scroll" functionality
         * We use the jQuery function scroll() to recalculate our variables as the 
         * page is scrolled/
         */
        $(window).scroll(function(){
            var window_top = $(window).scrollTop() + 12; // the "12" should equal the margin-top value for nav.stick
            var div_top = $('#nav-anchor').offset().top;
                if (window_top > div_top) {
                    $('header').addClass('stick');
                } else {
                    $('header').removeClass('stick');
                }
        });


        /**
         * This part causes smooth scrolling using scrollto.js
         * We target all a tags inside the nav, and apply the scrollto.js to it.
         */
        $("header a").click(function(evn){
            evn.preventDefault();
            $('html,body').scrollTo(this.hash, this.hash); 
        });



        /**
         * This part handles the highlighting functionality.
         * We use the scroll functionality again, some array creation and 
         * manipulation, class adding and class removing, and conditional testing
         */
        var aChildren = $("header li").children(); // find the a children of the list items
        var aArray = []; // create the empty aArray
        for (var i=0; i < aChildren.length; i++) {    
            var aChild = aChildren[i];
            var ahref = $(aChild).attr('href');
            aArray.push(ahref);
        } // this for loop fills the aArray with attribute href values

        $(window).scroll(function(){
            var windowPos = $(window).scrollTop(); // get the offset of the window from the top of page
            var windowHeight = $(window).height(); // get the height of the window
            var docHeight = $(document).height();

            for (var i=0; i < aArray.length; i++) {
                var theID = aArray[i];
                var divPos = $(theID).offset().top; // get the offset of the div from the top of page
                var divHeight = $(theID).height(); // get the height of the div in question
                if (windowPos >= divPos && windowPos < (divPos + divHeight)) {
                    $("a[href='" + theID + "']").addClass("header-active");
                } else {
                    $("a[href='" + theID + "']").removeClass("header-active");
                }
            }

            if(windowPos + windowHeight == docHeight) {
                if (!$("header li:last-child a").hasClass("header-active")) {
                    var navActiveCurrent = $(".header-active").attr("href");
                    $("a[href='" + navActiveCurrent + "']").removeClass("header-active");
                    $("header li:last-child a").addClass("header-active");
                }
            }
        });
    });

</script>

And this is Javascript code:

$.scrollTo = $.fn.scrollTo = function(x, y, options){
if (!(this instanceof $)) return $.fn.scrollTo.apply($('html, body'), arguments);

options = $.extend({}, {
    gap: {
        x: 0,
        y: 0
    },
    animation: {
        easing: 'swing',
        duration: 600,
        complete: $.noop,
        step: $.noop
    }
}, options);

return this.each(function(){
    var elem = $(this);
    elem.stop().animate({
        scrollLeft: !isNaN(Number(x)) ? x : $(y).offset().left + options.gap.x,
        scrollTop: !isNaN(Number(y)) ? y : $(y).offset().top + options.gap.y
    }, options.animation);
});
};

Here’s the link to the site I’m doing.
And here’s the effect site I used.

Answer 1

Since your menu is at the top of the site and does not change in size (according to the link of the site you made available), a solution would be to leave it with position:absolute; and create a div with position:relative; behind it, the same size, just to create the spacing and let the rest of the content align.

So we wouldn’t need anything from this part in javascript that you have today and would make the code cleaner.