0
私は期待どおりに単一ページのレイアウトを使用しているウェブサイトのプロジェクトにスティッキーヘッダーがあります。私のヘッダーはロゴのためにかなり大きいので、スクロールするたびに各セクションのヘッダーをカバーします。私はリンクがマージントップのようなスクロールでクリックされるたびに余白を相殺する方法であると思っていました：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");
}
});
}
あなたの質問、あなたが言ったことを引き起こし、説明、「スニペット」にあなたのコードを追加しますが、私には中国人のようなものです編集（すみません、アジア人の個人的な何もない） – MoolsBytheway
リンクそれがスクロールにIをクリックすると、それが必要なページセクションには、ページセクションでもう一度スクロールするためにクリックするだけですが、margin-topのオフセットが必要です：100px;ヘッダーを表示することができます。それは今意味がありますか？ –
完全に意味をなす！ – MoolsBytheway