0
Ich habe ein einseitiges Layout, wo ich meine "Contact Us" -Abschnitt markieren muss aktiv (dh. Markieren Sie die Navigation Links blau) wie meine anderen Links tun, wenn Sie klicken und gescrollt werden zu.Wie aktiviere ich den Link auf den unteren Bildlauf
Ich denke, der einfachste Weg, dies zu tun ist es aktiv zu machen, wenn die Seite nach unten gescrollt wird. Ich habe versucht, ein paar Dinge zu meinem Javascript hinzuzufügen, aber es hat nicht funktioniert.
EDIT:
Ich bin fast da Ich habe dieses Stück Code in meine jQuery hinzugefügt und fügte zwei Klassenelemente zu meinem HTML a href, aber jetzt, wenn ich „Get A Quote“ nach oben tut Ich markiere/aktiv, bis ich an ihm vorbei und dann wieder nach unten blättern kann. Irgendwelche Vorschläge?
Changed HTML
<li class="quoteive">
<a href="#quote">Get A Quote</a>
</li>
<li class="contactive">
<a href="#contact">Contact Us</a>
</li>
Added-Code
$(window).on("scroll", function() {
var scrollHeight = $(document).height();
var scrollPosition = $(window).height() + $(window).scrollTop();
if ((scrollHeight - scrollPosition)/scrollHeight === 0) {
$(".contactive").addClass('active');
$(".quoteive").removeClass('active');
}
else {
$(".contactive").removeClass('active');
}
});
Hier ist meine Originalcode:
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");
}
});
}//]]>@font-face {
font-family: 'Montserrat';
src: url('fonts/Montserrat-Regular.otf')
}
@font-face {
font-family: 'MontserratSlim';
src: url('fonts/Montserrat-ExtraLight.otf')
}
body {
font-family: Helvetica, Arial;
margin: 0px;
}
#header {
top: 0px;
}
.signsize {
width: 140px;
height: 90px;
}
.movesimg {
float: right;
}
.packing {
float: left;
}
h1 {
font-family: 'Montserrat';
font-size: 50px;
text-align: right;
color: #3d3d3d;
margin:0;
}
h2 {
margin: 0;
color: #3d3d3d;
}
h3 {
color: #3d3d3d;
}
h4 {
font-family: 'Montserrat';
font-size: 50px;
text-align: left;
color: #3d3d3d;
margin:0;
}
h5 {
font-size: 50px;
padding-top: 60px;
color: #3d3d3d;
margin: 0;
}
h6 {
font-family: 'MontserratSlim';
font-size: 15px;
text-align: left;
color: #929292;
margin:0;
}
#descriptionl {
font-family: 'MontserratSlim';
font-size: 15px;
color: #929292;
margin:0;
}
#descriptionr {
font-family: 'MontserratSlim';
font-size: 15px;
color: #929292;
text-align: right;
margin:0;
}
#movessec {
display: inline-block;
padding-top: 60px;
padding-bottom: 60px;
border-bottom: solid thin #d8d8d8;
}
#navbar {
position: fixed;
z-index: 1;
background: white;
right: 0px;
top: 0px;
width: 100%;
}
#logo {
float: left;
margin-left: 10%;
padding-top: 10px;
padding-bottom: 10px;
}
#top-menu {
z-index: 1;
float: right;
padding-right: 10%;
padding-top: 25px;
padding-bottom: 25px;
}
#top-menu li {
float: left;
list-style-type: none;
white-space: nowrap;
font-size: 15px;
font-family: Montserrat;
text-transform: uppercase;
font-weight: 600;
text-align: center;
letter-spacing: 1px;
}
#more {
padding-left: 50px;
}
#moreR {
padding-right: 50px;
}
#more li {
float: left;
list-style-type: none;
white-space: nowrap;
font-size: 15px;
font-family: Montserrat;
text-transform: uppercase;
font-weight: 600;
text-align: center;
letter-spacing: 1px;
padding: 8px;
outline: #4690d4 solid thin;
text-decoration: none;
}
#moreR li {
float: right;
list-style-type: none;
white-space: nowrap;
font-size: 15px;
font-family: Montserrat;
text-transform: uppercase;
font-weight: 600;
text-align: center;
letter-spacing: 1px;
padding: 8px;
outline: #4690d4 solid thin;
text-decoration: none;
}
#top-menu a {
display: inline;
width: 6em;
text-align: center;
padding: 15px;
-webkit-transition: .5s all ease-out;
-moz-transition: .5s all ease-out;
transition: .5s all ease-out;
color: #545454;
text-decoration: none;
letter-spacing: 1px;
}
#top-menu a:hover {
color: #575757;
}
#top-menu li.active a {
color: white;
position: relative;
background: #4690d4;
}
#home {
padding-left: 70px;
padding-top: 150px;
height: 800px;
background-image: url(img/movingboxes.jpg);
background-size: cover;
background-repeat: no-repeat;
font-family: Montserrat;
}
#services {
height: 1600px;
}
#servicesleft {
float: left;
height: 100%;
width: 12%;
}
#servicesmain {
float: left;
height: 100%;
width: 76%;
}
#servicesright {
float: left;
height: 100%;
width: 12%;
}
#moving {
height: 800px;
padding-top: 50px;
padding-left: 12%;
padding-right: 12%;
background-image: url('img/cardboardbright.jpg');
font-family: Montserrat;
}
#quote {
height: 800px;
background: grey;
}
#contact {
height: 325px;
}
#contactleft {
float: left;
height: 100%;
width: 12%;
background: white;
}
#contactmain {
float: left;
height: 100%;
width: 76%;
background: white;
}
#contactright {
float: left;
height: 100%;
width: 12%;
background: white;
}<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>
<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>
Ja mate hat gut funktioniert, danke – Hsan