javascript - 边距偏移粘性标题滚动问题

Question

所以我在一个按预期使用单页布局的网站元素上有一个粘性标题。只是因为我的标题因为 Logo 而很大，所以每当我滚动时它都会覆盖每个部分的标题。我想知道是否有一种方法可以在单击带有 margin-top: 150px; 的滚动链接时抵消边距。我还有一个使用绝对位置的内容，我想指定另一个选择器，该选择器仅针对特定页面部分固定滚动。我希望这是有道理的，我将发布我目前拥有的一部分 html 和 jquery 代码:

HTML:

    <header>
            <div class="container-fluid example5">
                <nav class="navbar navbar-default navigation1">
                    <div class="container-fluid">
                        <div class="navbar-header page-scroll">
                            <button type="button" id="nav-toggle" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar5"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
                            <a class="navbar-brand scroll-top" href="index.html"><img class="img-responsive" src="img/Logo3.png" alt="Cleaning Services Logo"></a>
                        </div>
                        <div id="navbar5" class="navbar-collapse collapse">
                            <ul class="nav navbar-nav navbar-right">
                                <li class="active"><a class="scroll-link" data-id="home" href="#carousel-example">HOME</a></li>
                                <li><a href="#about" class="scroll-link" data-id="about">ABOUT</a></li>
                                <li><a href=".services" class="scroll-link" data-id="services">SERVICES</a></li>
                                <li><a class="red scroll-link" data-id="hot-offers" href=".hot-offers">HOT OFFERS</a></li>
                                <li><a href=".testimonials" class="scroll-link" data-id="testimonials">TESTIMONIALS</a></li>
                                <li><a href=".contact-us" class="scroll-link" data-id="contact">CONTACT</a></li>
                            </ul>
                        </div>
                        <!--/.nav-collapse -->
                    </div>
                    <!--/.container-fluid -->
                </nav>
            </div>
        </header>
<!-- content -->
<div id="#carousel-example" class="page-section">
<h1>Header</h1>
<p>CONTENT....</p>
</div>
<div id="about" class="page-section"><h2>Header</h2>
<p>CONTENT....</p></div>
<div id=".services" class="page-section"><h3>Header</h3>
<p>CONTENT....</p></div>

jQuery:

$('a').click(function (e) {
                e.preventDefault();

                var curLink = $(this);
                var scrollPoint = $(curLink.attr('href')).position().top;
                $('body,html').animate({
                    scrollTop: scrollPoint
                }, 500);
            })
            $(window).scroll(function () {
                onScrollHandle();
            });

            function onScrollHandle() {
                //Navbar shrink when scroll down
                $(".navbar-default").toggleClass("navbar-shrink", $(this).scrollTop() > 50);
                //Get current scroll position
                var currentScrollPos = $(document).scrollTop();
                //Iterate through all node
                $('#navbar5 > ul > li > a').each(function () {
                    var curLink = $(this);
                    var refElem = $(curLink.attr('href'));
                    //Compare the value of current position and the every section position in each scroll
                    if (refElem.position().top <= currentScrollPos && refElem.position().top + refElem.height() > currentScrollPos) {
                        //Remove class active in all nav
                        $('#navbar5 > ul > li').removeClass("active");
                        //Add class active
                        curLink.parent().addClass("active");
                    }
                    else {
                        curLink.parent().removeClass("active");
                    }
                });
            }

Answer 1

不明白你到底想要什么，但首先让我们先尝试让你的代码工作，我删除了 scrollHandle() 函数，并更正了你的 html，现在试着向我解释你想要什么，我会编辑我的答案。

$('a').click(function (e) {
                e.preventDefault();

                var curLink = $(this);
                var scrollPoint = $(curLink.attr('href')).position().top;
                $('body,html').animate({
                    scrollTop: scrollPoint
                }, 500);
            });
            

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<header>
            <div class="container-fluid example5">
                <nav class="navbar navbar-default navigation1">
                    <div class="container-fluid">
                        <div class="navbar-header page-scroll">
                            <button type="button" id="nav-toggle" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar5"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
                            <a class="navbar-brand scroll-top" href="index.html"><img class="img-responsive" src="img/Logo3.png" alt="Cleaning Services Logo"></a>
                        </div>
                        <div id="navbar5" class="navbar-collapse collapse">
                            <ul class="nav navbar-nav navbar-right">
                                <li class="active"><a class="scroll-link" data-id="home" href="#carousel-example">HOME</a></li>
                                <li><a href="#about" class="scroll-link" data-id="about">ABOUT</a></li>
                                <li><a href="#services" class="scroll-link" data-id="services">SERVICES</a></li>
                                <li><a class="red scroll-link" data-id="hot-offers" href="#hot-offers">HOT OFFERS</a></li>
                                <li><a href="#testimonials" class="scroll-link" data-id="testimonials">TESTIMONIALS</a></li>
                                <li><a href="#contact-us" class="scroll-link" data-id="contact">CONTACT</a></li>
                            </ul>
                        </div>
                        <!--/.nav-collapse -->
                    </div>
                    <!--/.container-fluid -->
                </nav>
            </div>
        </header>
<!-- content -->

<div id="about" class="page-section"><h2>about</h2>
<p>CONTENT....</p></div>
<div id="services" class="page-section"><h3>services</h3>
<p>CONTENT....</p></div>
<div id="hot-offers" class="page-section"><h3>Hot Offers</h3>
<p>CONTENT....</p></div>
<div id="testimonials" class="page-section"><h3>testimonials</h3>
<p>CONTENT....</p></div>
<div id="contact-us" class="page-section"><h3>Contact US</h3>
<p>CONTENT....</p></div>
<div style="height:300px"/>