Scroll To negative or at the end of the anchor

1

This is the following, I have a problem with the Scroll To method. I have a menu that uses position: fixed in css and when you click on it it anchors with the contents until normal if it were not for a problem. The menu has 152px height and as I do not handle so much of java script so the menu does not stay on top of the content I used padding-top in each content, only the client does not like it, so I come to appeal to you with the following question.

1 - Would it be possible when I click on a link in the menu, the javascript calculation decreases 152px so that all of it is on top of the content, not needing padding?

2 - Or else would it be possible when I click on a link instead of going to its corresponding content it go to the end of the content above it?

Here is the website address for link analysis and below the code used:

<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 ul 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>
    
asked by anonymous 08.06.2016 / 21:06

1 answer

3

You can subtract the height of header from the scroll animation. EXAMPLE here, I just put clients in this case. This way you can remove the padding-top in each section you placed for that reason

$('header ul a').on('click', function(evn) {
  evn.preventDefault();
  $("html, body").animate({
    scrollTop: $($(this).attr('href')).offset().top - $('header').height() // vamos buscar o elemento cujo o id é a mesma href onde clicamos e dps vamos saber a altura a que está do topo e subtrair a altura do menu
  }, 500);
});

Here's a example which you can adapt to your case too, is more direct than how you are doing

    
08.06.2016 / 23:05