-1
私は、スクロール位置でアクティブなクラスを変更するnavbarを備えた1ページのレイアウトを持っています。私は連絡先セクションにスクロールするときに「お問い合わせ」のナビゲーションバーリンクを選択しないという問題がありましたが、ユーザーがページの下にスクロールしたときに連絡先リンクをアクティブにするコードを追加することで修正しました。特定のhrefからアクティブなクラスを削除する
問題は、私が過去にスクロールしてからもう一度やり直すまで、ページの一番下に達した後、「見積もりを取得する」リンクがアクティブにならないということです。
ie。すべてのものが各divの過去の細かいスクロールであり、リンクはスクロールに従ってアクティブになります。ページの一番下にある「お問い合わせ」が有効になります。 '見積もり' divまでスクロールしますが、「見積もりを入手する」は有効になりません。過去のものをスクロールし、他のすべてのものが動作し、スクロールバックして「見積もりを入手する」が再びアクティブになります。ここで
はJavascriptを私の完全なコードある
<script type='text/javascript'>//<![CDATA[
window.onload = function(){
// Cache selectors
var lastId,
topMenu = $("#top-menu"),
topMenuHeight = topMenu.outerHeight()+15,
// All list items
menuItems = topMenu.find("a"),
// Anchors corresponding to menu items
scrollItems = menuItems.map(function(){
var item = $($(this).attr("href"));
if (item.length) { return item; }
});
// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e){
var href = $(this).attr("href"),
offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
$('html, body').stop().animate({
scrollTop: offsetTop
}, 300);
e.preventDefault();
});
// Bind to scroll
$(window).scroll(function(){
// Get container scroll position
var fromTop = $(this).scrollTop()+topMenuHeight;
// Get id of current scroll item
var cur = scrollItems.map(function(){
if ($(this).offset().top < fromTop)
return this;
});
// Get the id of the current element
cur = cur[cur.length-1];
var id = cur && cur.length ? cur[0].id : "";
if (lastId !== id) {
lastId = id;
// Set/remove active class
menuItems
.parent().removeClass("active")
.end().filter("[href='#"+id+"']").parent().addClass("active");
}
});
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
$(".contactive").addClass('active');
$('a[href="#quote"]').parent('li').parent('li').removeClass('active');
}
else {
$(".contactive").removeClass('active');
}
});
}//]]>
</script>
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="header">
<div id="navbar">
<div id="logo">
<img src="logosmall.png">
</div>
<ul id="top-menu">
<li class="active">
<a href="#home">Home</a>
</li>
<li>
<a href="#services">Services</a>
</li>
<li>
<a href="#moving">Moving Tips</a>
</li>
<li>
<a href="#quote">Get A Quote</a>
</li>
<li class="contactive">
<a href="#contact">Contact Us</a>
</li>
</ul>
</div>
</div>
<div id="home">
Content Here.
</div>
<div id="services">
<div id="servicesleft"></div>
<div id="servicesmain">
<div id="movessec">
Content Here.
</div>
<div id="movessec">
Content Here.
</div>
<div id="movessec">
Content Here.
</div>
</div>
<div id="servicesright"></div>
</div>
<div id="moving">Content here.</div>
<div id="quote">Quote form goes here.</div>
<div id="contact">
<div id="contactleft">Content Here</div>
<div id="contactmain">Content Here</div>
<div id="contactright">Content Here</div>
</div>
</body>
'$（」 [href = '＃ "+ quote +"'] "）'存在しない 'quote 'という変数が必要です。代わりにリテラル文字列を試してください： '$（" [href = '＃quote'] "）'。短いサンプルでは修正しましたが、フルコードのリファレンスでは修正していません。 – ADyson
ちょうどポストを更新し、元の問題に解決策を見つけましたが、新しい問題が発生しました – Hsan
なぜ2つの別々の関数がスクロールイベントを処理するのですか？これは何らかの競合状態につながると考えられます。 – ADyson