Issue
I'm trying to add/remove a class to the sticky header, when this reaches a specific section with a class "dark-section", but i want to do it automaticly if there are 2 or more section with the same class.
jQuery(function ($) {
'use strict';
var Header = $('.header');
function HeaderDarkMode() {
var scrollTop = $(window).scrollTop(),
dark = $('.dark-section');
dark.length && dark.each(function () {
var top = $(this).position().top,
height = $(this).outerHeight(),
bottom = top + height;
scrollTop >= top - 45 && scrollTop < bottom - 45 ? Header.addClass('dark') : Header.removeClass('dark');
});
}
$(window).scroll(function() {
HeaderDarkMode();
});
});body{
margin: 0;
padding: 0;
}
header{
background: gray;
opacity: .5;
min-height: 90px;
position: sticky;
top: 0;
width: 100%
}
header.dark{
background: red;
}
section{
min-height: 800px;
}
section.dark-section{
background: black;:
}
footer{
min-height: 300px;
backgroud-color: #f1f1f1;
}<html>
<head>
<title>Dark Header Test</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<header class="header"></header>
<section></section>
<section class="dark-section"></section>
<section></section>
<section class="dark-section"></section>
<section></section>
<section class="dark-section"></section>
<section></section>
<footer></footer>
</body>
</html>This is my code i'm working on, but it seems that only work with the last selector founded.
Help.
Solution
The problem you are facing is that when you cycle over all .dark-sections in your code and add or remove .dark from the header, you always end up with the last iteration's result. If you are over the second dark section, it correctly adds the class, but then it has to calculate if you happen to be over the third dark section, which you are not because you are only over the second one, so it removes the class again. You need to change this calculation so that either it stop on match, or you use flags. Since your code uses jQuery, I will go with the later option:
// use a variable to keep track of state
var isOverAnyDarkSection = false
dark.each(function () {
var top = $(this).position().top,
height = $(this).outerHeight(),
bottom = top + height;
if (scrollTop >= top - 45 && scrollTop < bottom - 45) {
// set the flag to true the header is over any dark section
isOverAnyDarkSection = true
}
});
// finally, only now decide if the class should be added or removed
if (isOverAnyDarkSection) {
Header.addClass('dark')
} else {
Header.removeClass('dark')
}
This way, the class is only added or removed once based on the state.
Answered By - Jakub Kotrs
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.