平滑滚动固定标题

Question

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

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

有人有什么建议吗？

Answer 1

您需要通过将视图移动到的位置减去固定标题的高度来适应它。

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

只需将“ fixedHeader”替换为用于固定标头的任何元素。

Answer 2

这是一段HTML和CSS，它们正在创建固定的标头：

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

平滑滚动固定标题

问题描述

2 个解决方案

解决方案1
1 已采纳 2016-12-13 11:42:36

解决方案2
0 2016-12-13 11:30:00

平滑滚动固定标题

问题描述

2 个解决方案

解决方案1 1 已采纳 2016-12-13 11:42:36

解决方案2 0 2016-12-13 11:30:00

解决方案1
1 已采纳 2016-12-13 11:42:36

解决方案2
0 2016-12-13 11:30:00