Tengo un script jQuery que estoy usando para un desplazamiento suave en mi sitio, y tengo un encabezado de posición fija, pero no estoy seguro de cómo tener en cuenta el tamaño del encabezado fijo, ya que cuando se desplaza hacia abajo, el encabezado fijo cubre un título .

$(function () {
    $('a[href*="#"]:not([href="#"])').click(function () {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $('html, body').animate({
                    scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });
});

¿Alguien tiene alguna sugerencia?

1
user2513528 13 dic. 2016 a las 14:19

2 respuestas

La mejor respuesta

Necesita acomodar la altura del encabezado fijo restándolo de la posición a la que está moviendo la vista.

$('html, body').animate({
  scrollTop: target.offset().top - fixedHeader.outerHeight()
}, 1000);

Simplemente reemplace "fixedHeader" con cualquier elemento que esté utilizando para el encabezado fijo.

2
sankorati 13 dic. 2016 a las 11:42

Aquí hay una pieza de HTML y CSS que está creando un encabezado fijo:

<html>
<head>
    <style type="text/css">
        body {
            margin: 0px;
            background: #000;
        }

        .header-cont {
            width: 100%;
            position: fixed;
            top: 0px;
        }

        .header {
            height: 50px;
            background: #F0F0F0;
            border: 1px solid #CCC;
            width: 960px;
            margin: 0px auto;
        }

        .content {
            width: 960px;
            background: #F0F0F0;
            border: 1px solid #CCC;
            height: 2000px;
            margin: 70px auto;
        }
    </style>
</head>
<body>
    <div class="header-cont">
        <div></div>
    </div>

    <div></div>
</body>
</html>
0
Dawid Rutkowski 13 dic. 2016 a las 11:30