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

只需更换＆＃34; fixedHeader＆＃34;用于固定标题的任何元素。

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 个答案: