Ich habe ein ein Seitenlayout mit einer Navigationsleiste, die aktive Klasse an der Bildlaufposition ändert. Ich hatte ein Problem, bei dem ich den Navigationslink "Kontakt" nicht auswählte, wenn ich zum Kontaktbereich scrollte, aber ich habe das behoben, indem ich Code hinzugefügt habe, um den Kontakt-Link aktiv zu machen, wenn der Benutzer zum Ende der Seite scrollt .Entfernen der aktiven Klasse von einem spezifischen href
Das Problem ist jetzt, dass jetzt der "Get A Quote" -Link nicht aktiv wird, nachdem ich den unteren Rand der Seite erreicht habe, bis ich über sie hinausgescrollt habe und dann wieder runter.
dh. Alles ist gut, blättern Sie an jedem div vorbei und die Links werden gemäß scroll aktiv. Zum Ende der Seite gehen "Kontakt" wird aktiv. Scrollen Sie bis zum "Quote" div, aber "Get A Quote" wird nicht aktiv. Scrolle vorbei, alle anderen arbeiten, scrollen zurück nach unten und "Get A Quote" wird wieder aktiv.
Hier ist mein vollständiger Code
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 +' ']") 'erwartet eine Variable namens' zitat', die nicht existiert. Versuchen Sie stattdessen eine literale Zeichenfolge: '$ (" [href = '# quote'] ")'. Sie haben es in Ihrem kurzen Beispiel, aber nicht in der Referenz für den vollständigen Code korrigiert. – ADyson
hat gerade den Beitrag aktualisiert, die Lösung für das ursprüngliche Problem gefunden, aber jetzt ein neues Problem. – Hsan
Warum haben Sie 2 separate Funktionen für das Scroll-Ereignis? Dies könnte möglicherweise zu einer Art von Wettlauf führen. – ADyson