平稳滚动的固定标头帐户 [英] account for fixed header with smooth scroll

问题描述

我有一个jQuery脚本正在我的网站上进行一些平滑的滚动，并且我有一个固定的位置标头，但是我不确定如何解释固定的标头大小，因为当它向下滚动时，固定的标头涵盖了标题.

I Have a jQuery script am using for some smooth scrolling on my site, and i have a fixed position header, but I'm not sure how to account for the fixed header size, as when it scrolls down, the fixed header covers a title.

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

有人有什么建议吗?

推荐答案

您需要通过从视图移动位置减去固定标头的高度来适应固定标头的高度.

You need to accomodate for the height of the fixed header by subtracting it from the position you are moving the view to.

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

只需将"fixedHeader"替换为用于固定标头的任何元素.

Just replace "fixedHeader" with whatever element you are using for fixed header.

这篇关于平稳滚动的固定标头帐户的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！