How to change the menu position using the scrollTo function?

2

I am making a website and created a menu with anchor that has the effect of scroll with Javascript. So that's fine, the only problem is that I need to when Javascript takes action the content always stays under the menu, but I did not find where to set it.

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 the 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 is the link for the site I'm doing . #.

    

asked by anonymous 28.01.2015 / 22:44

1 answer

1

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

So you would not need anything of this part in javascript that you have today and would leave the code cleaner.

    
19.03.2015 / 21:55