Reputation: 335
I have a position: fixed
menu, which elements are section titles from my page. If I am currently in any of the sections, I need to highlight the corresponding item in the menu. Not on clicking menu items - I need it to work when I scroll to sections.
Code of menu goes here:
<section class="block-product-tabs">
<div class="block-content">
<div class="block-item">
<a href="#option-1">
OPTION 1
</a>
</div>
<div class="block-item">
...
</div> </section>
And example section:
<section class="block-title" data-target-id="option-3">
<div class="title">Option 3</div>
</section>
I tried with jQuery:
var sections_array = $('section.block-title');
$(window).scroll(function() {
var window_scroll = $(this).scrollTop();
$(sections_array).each( function() {
var el_position = $(this).offset().top + $(this).outerHeight() - $(window).height();
if (window_scroll > el_position) {
console.log($(this).data('target-id'));
}
});
});
but it works like dominoes, when I am on section of name Option 1
, ok - console.log gives me option-1
, but when I am on Option 2
it gives me option-2
and all previous sections (because they are under it) - in this case also option-1
.
Do you know any jQuery trics to deal with it? Thanks for help.
Upvotes: 0
Views: 2187
Reputation: 3031
try to make your code like this. I hope this is the helpful to you.
$(document).ready(function(){
var lastId,
topMenu = $(".menu_links"),
menuItems = topMenu.find("a"),
scrollItems = menuItems.map(function () {
var item = $($(this).attr("href"));
if (item.length) {
return item;
}
});
menuItems.click(function (e) {
var href = $(this).attr("href"),
offsetTop = href === "#" ? 0 : $(href).offset().top + 1;
$('html, body').stop().animate({
scrollTop: offsetTop
}, 1200);
e.preventDefault();
});
$(window).scroll(function () {
var fromTop = $(this).scrollTop();
var cur = scrollItems.map(function () {
if ($(this).offset().top <= fromTop)
return this;
});
cur = cur[cur.length - 1];
var id = cur && cur.length ? cur[0].id : "";
if (lastId !== id) {
lastId = id;
menuItems
.parent().removeClass("active")
.end().filter("[href='#" + id + "']").parent().addClass("active");
}
});
});
body{
margin: 0;
}
*{
box-sizing: border-box;
}
section{
height: 100vh;
}
.menu_links{
margin: 0px;
padding: 0px;
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: rgba(255,255,255,0.75);
}
.menu_links li{
display: inline-block;
float: left;
}
.menu_links li a{
padding: 10px;
color: #000;
text-decoration: none;
display: inline-block;
}
.menu_links li.active a{
background-color: blue;
color: #fff;
}
<body>
<ul class="menu_links">
<li class="active"><a href="#section1">section1</a></li>
<li><a href="#section2">section2</a></li>
<li><a href="#section3">section3</a></li>
<li><a href="#section4">section4</a></li>
</ul>
<section id="section1" style="background-color: pink"></section>
<section id="section2" style="background-color: red"></section>
<section id="section3" style="background-color: orange"></section>
<section id="section4" style="background-color: green"></section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</body>
Thank You...
Upvotes: 1
Reputation: 4902
You just need to add active
class (with some active styles) on click
and remove that just like this
$(document).ready(function(){
$('ul li a').click(function(){
$('li a').removeClass("active");
$(this).addClass("active");
});
});
body{
font-sze:14px;
}
.container{
max-width:960px;
margin:0 auto;
}
nav ul li{
list-style:none;
float:left;
padding-right:20px;
}
nav ul li a{
text-decoration:none;
color:#222;
background-color:#ccc;
padding:4px 5px;
}
.active{
background-color:#d90000;
color:#fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div style="text-align:center;margin-top:25px;font-weight:bold;texxxt-decoration:none;">
Visit <a href="https://themeshook.com/" px;target="_blank">My Blog</a>
</div>
<div class="container">
<nav class="navecation">
<ul id="navi">
<li><a class="menu active"#">About </a></li>
<li><a class="menu" href="#">Contact </a></li>
<li><a class="menu" href="#">Services</a></li>
<li><a class="menu" href="#">Contact Us</a></li>
<li><a class="menu" href="http://www.mywebtricks.com/2014/03/add-active-class-to-navigation-menu.html">Read Our Blog</a></li>
</ul>
</nav>
</div>
<body>
In you case selectors are as follow(because your structure is different)
$(document).ready(function(){
$('.block-content .block-item a').click(function(){
$('.block-item a').removeClass("active");
$(this).addClass("active");
});
});
and then .active
style
.active{
background-color:#d90000;
color:#fff;
}
Active link on click and window scroll
Note: you need to change selectors as i mention above
$(document).ready(function () {
$(document).on("scroll", onScroll);
//smoothscroll
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('#menu-center a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('#menu-center ul li a').removeClass("active");
currLink.addClass("active");
}
else{
currLink.removeClass("active");
}
});
}
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.menu {
width: 100%;
height: 75px;
background-color: rgba(0, 0, 0, 1);
position: fixed;
background-color:rgba(4, 180, 49, 0.6);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.light-menu {
width: 100%;
height: 75px;
background-color: rgba(255, 255, 255, 1);
position: fixed;
background-color:rgba(4, 180, 49, 0.6);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#menu-center {
width: 980px;
height: 75px;
margin: 0 auto;
}
#menu-center ul {
margin: 15px 0 0 0;
}
#menu-center ul li {
list-style: none;
margin: 0 30px 0 0;
display: inline;
}
.active {
font-family:'Droid Sans', serif;
font-size: 14px;
color: #fff;
text-decoration: none;
line-height: 50px;
}
a {
font-family:'Droid Sans', serif;
font-size: 14px;
color: black;
text-decoration: none;
line-height: 50px;
}
#home {
background-color: grey;
height: 100%;
width: 100%;
overflow: hidden;
background-image: url(images/home-bg2.png);
}
#portfolio {
background-image: url(images/portfolio-bg.png);
height: 100%;
width: 100%;
}
#about {
background-color: blue;
height: 100%;
width: 100%;
}
#contact {
background-color: red;
height: 100%;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="m1 menu">
<div id="menu-center">
<ul>
<li><a class="active" href="#home">Home</a>
</li>
<li><a href="#portfolio">Portfolio</a>
</li>
<li><a href="#about">About</a>
</li>
<li><a href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
<div id="home"></div>
<div id="portfolio"></div>
<div id="about"></div>
<div id="contact"></div>
Upvotes: 1