Question

我正在开发一个单页网站，顶部有一个带有导航菜单的固定标题。导航菜单链接到页面上的div。

问题在于，当您点击其中一个链接时，标题会覆盖部分标题。我想知道如何在不在每个div的顶部添加大量填充的情况下修复它。

这是页面： http://arifolmancohen.com/Ari/index.html

Answer 1

我看到你正在使用jQuery，所以也许我前几天找到的这个片段正是你正在寻找的。

您遇到的这个问题是a href=#target自动找到具有匹配ID＃target的元素（然后是name = #target，...）并将其带到页面顶部。但是，在您的情况下，因为您有一个固定的标题，标题将覆盖页面顶部的顶部！

因此，通过从通常滚动到的页面中减去固定元素（95px）的高度，可以防止固定标题覆盖您的内容。

在HTML网页末尾的</body>和</html>标记之间加入以下JavaScript：

(function($) {
    $('.main-nav 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 - 95
                }, 1200);
                return false;
            }
        }
    });
})(jQuery);

Answer 2

我认为只有使用JavaScript才能滚动偏移。有了它，您可以在单击导航链接时滚动到相应的标题元素。查看this回答并尝试添加（或减去？）到偏移量。

$('html, body').animate({
  scrollTop: $el.offset().top
}, 1000);

这是为了平滑滚动，您可以使用0 ms进行即时滚动。

修复了页眉导航中不包含节标题的标题

2 个答案: