Question

所以我在网站项目上有一个粘性标题，正如预期的那样使用单页面布局。仅仅因为我的标题由于徽标而非常大，每当我滚动它时都会覆盖每个部分的标题。我想知道这是一种方法来抵消每当链接点击滚动时的边距，如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

Coud不明白你想要什么，但是对于一个开始，我们试着让你的代码先行，我删除了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"/>

margin offset Sticky header scrolling issue

1 个答案: