【发布时间】：2017-03-24 18:17:31
【问题描述】：
所以我在一个按预期使用单页布局的网站项目上有一个粘性标题。只是因为我的标题因为徽标而很大，所以每当我滚动它时，它都会覆盖每个部分的标题。我想知道是否有一种方法可以在单击滚动时使用类似 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");
}
});
}
【问题讨论】：
-
编辑你的问题，将你的代码添加到“sn-p”中，解释一下，因为你说的对我来说就像中文（对不起，亚洲人不是私人的）
-
当我点击链接时，它会按原样滚动到页面部分，我只需要在点击它时再次滚动页面部分，但偏移量为 margin-top:100px;所以标题是可见的。现在有意义吗？
-
完全有意义！
-
但是你的代码还远远没有工作，你的 html 崩溃了，并且不适合你的 js
标签： javascript jquery html css scroll