1

É o seguinte, estou com um problema com o método Scroll To. Tenho um menu que usa position:fixed no css e quando vc clica nele ele faz a ancora com o conteúdo até ai normal se não fosse por um problema. O menu tem 152px de altura e como eu não manjo tanto assim de java script para o menu não ficar em cima do conteúdo eu usei padding-top em cada conteúdo, só que o cliente não está gostando, então venho recorrer a vocês com a seguinte pergunta.

1 - Seria possível Quando eu clicar em um link do menu o calculo do javascript diminuir 152px assim ficando todo ele em cima do conteúdo não tendo necessidade de padding?

2 - Ou senão seria possível quando eu clicar em um link ao invés de ir para seu conteúdo correspondente ele ir para o final do conteúdo acima dele?

Aqui está o endereço do site para análise http://bastidordigital.com.br/site/ e abaixo o código usado:

<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>

1 Resposta 1

3

Pode subtrair a altura do header à animação do scroll. EXEMPLO aqui, só pus clientes neste caso. Desta maneira pode tirar o padding-top em cada secção que colocou por esse motivo

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

Aqui tem um exemplo cujo pode adaptar ao seu caso também, é mais direto do que como está a fazer

4
  • Poxa muito obrigado ajudou mesmo agora só vou usar esse código nos meus projetos
    – user4451
    Commented 8/06/2016 às 22:26
  • 1
    Se a resposta ajudou não esqueça de marcar como correta! Commented 8/06/2016 às 23:03
  • Miguel Onde eu clico para aceitar?
    – user4451
    Commented 11/06/2016 às 2:41
  • Aí por baixo das setas cima/baixo, do lado esquerdo da resposta, tipo um 'certo' a cinzento, é só clicar aí. Obrigado @user4451
    – Miguel
    Commented 11/06/2016 às 11:25

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .