how to find the element which are on screen during scroll jquery.
Currently , I am using stick navbar with scroll.When we scroll down or up automatically the link in the navbar should be enabled.
I tried http://codetheory.in/change-active-state-links-sticky-navigation-scroll/ and able to succeed.
One problem is the link getting enabled when it reached the top of the screen. But I need the link to be enabled when the element is reached the center of the screen.
Thanks in advance.
Just add a half of the window height to the current position:
var cur_pos = $(this).scrollTop() + $(window).height() / 2;
And subtract it when you click on a link:
$('html, body').animate({
scrollTop: $(id).offset().top - nav_height - $(window).height() / 2
}, 500);
Try this snippet (better open it in full-screen):
var sections = $('section')
, nav = $('nav')
, nav_height = nav.outerHeight();
$(window).on('scroll', function () {
var cur_pos = $(this).scrollTop() + $(window).height() / 2;
sections.each(function() {
var top = $(this).offset().top - nav_height,
bottom = top + $(this).outerHeight();
if (cur_pos >= top && cur_pos <= bottom) {
nav.find('a').removeClass('active');
sections.removeClass('active');
$(this).addClass('active');
nav.find('a[href="#'+$(this).attr('id')+'"]').addClass('active');
}
});
});
nav.find('a').on('click', function () {
var $el = $(this)
, id = $el.attr('href');
$('html, body').animate({
scrollTop: $(id).offset().top - nav_height - $(window).height() / 2
}, 500);
return false;
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Open Sans', sans-serif;
}
/* Navigation */
nav {
width: 100%;
height: 60px;
position: fixed;
top: 0;
background: #1ABC9C;
}
nav ul {
padding: 20px;
margin: 0 auto;
list-style: none;
text-align: center;
}
nav ul li {
display: inline-block;
margin: 0 10px;
}
nav ul li a {
padding: 10px 0;
color: #fff;
font-size: 1rem;
text-decoration: none;
font-weight: bold;
transition: all 0.2s ease;
}
nav ul li a:hover {
color: #34495E;
}
a.active {
border-bottom: 2px solid #ecf0f1;
}
/* Headings */
h1 {
font-size: 5rem;
color: #34495E;
}
/* Sections */
section {
width: 100%;
padding: 50px;
background: #fff;
border-bottom: 1px solid #ccc;
height: 500px;
text-align: center;
}
section:nth-child(even) {
background: #ecf0f1;
}
section:nth-child(odd) {
background: #bdc3c7;
}
.sections section:first-child {
margin-top: 60px;
}
section.active {}
footer {
height: 500px;
background: #34495e;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>
</ul>
</nav>
<div class="sections">
<section id="1"><h1>First</h1></section>
<section id="2"><h1>Second</h1></section>
<section id="3"><h1>Third</h1></section>
<section id="4"><h1>Fourth</h1></section>
<section id="5"><h1>Fifth</h1></section>
</div>
<footer></footer>
Can you please try following code:
var sections = $('section')
, nav = $('nav')
, nav_height = nav.outerHeight()
, win_height = $(window).height();
$(window).on('scroll', function () {
var cur_pos = $(this).scrollTop();
sections.each(function() {
var top = $(this).offset().top - nav_height,
bottom = top + $(this).outerHeight();
if (bottom >= (win_height / 2 + cur_pos) ) {
nav.find('a').removeClass('active');
sections.removeClass('active');
$(this).addClass('active');
nav.find('a[href="#'+$(this).attr('id')+'"]').addClass('active');
return false;
}
});
});
nav.find('a').on('click', function () {
var $el = $(this)
, id = $el.attr('href');
$('html, body').animate({
scrollTop: $(id).offset().top - nav_height
}, 500);
return false;
});
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Open Sans', sans-serif;
}
/* Navigation */
nav {
width: 100%;
height: 60px;
position: fixed;
top: 0;
background: #1ABC9C;
}
nav ul {
padding: 20px;
margin: 0 auto;
list-style: none;
text-align: center;
}
nav ul li {
display: inline-block;
margin: 0 10px;
}
nav ul li a {
padding: 10px 0;
color: #fff;
font-size: 1rem;
text-decoration: none;
font-weight: bold;
transition: all 0.2s ease;
}
nav ul li a:hover {
color: #34495E;
}
a.active {
border-bottom: 2px solid #ecf0f1;
}
/* Headings */
h1 {
font-size: 5rem;
color: #34495E;
}
/* Sections */
section {
width: 100%;
padding: 50px;
background: #fff;
border-bottom: 1px solid #ccc;
height: 500px;
text-align: center;
}
section:nth-child(even) {
background: #ecf0f1;
}
section:nth-child(odd) {
background: #bdc3c7;
}
.sections section:first-child {
margin-top: 60px;
}
section.active {}
footer {
height: 500px;
background: #34495e;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>
</ul>
</nav>
<div class="sections">
<section id="1"><h1>First</h1></section>
<section id="2"><h1>Second</h1></section>
<section id="3"><h1>Third</h1></section>
<section id="4"><h1>Fourth</h1></section>
<section id="5"><h1>Fifth</h1></section>
</div>
<footer></footer>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
Hope, it helps :)
Related
I would like to create a navigation that scrolls to the specific part and also auto-updates when scrolling up/down.
It should also auto-scroll to the next possible div when scrolling. (this is not that important)
However, it should update on scroll when passing/on the corresponding div. (using jquery or plain js)
I have used this as the backend code for the navigation:
function ShowLanding() {
window.scrollTo(0,0);
}
function ShowContact() {
document.getElementById("contact").scrollIntoView();
}
function ShowAbout() {
document.getElementById("about").scrollIntoView();
}
//nav update code
var nav = $('nav');
var line = $('<div />').addClass('line');
line.appendTo(nav);
var active = nav.find('.active');
var pos = 0;
var wid = 0;
if (active.length) {
pos = active.position().left;
wid = active.width();
line.css({
left: pos,
width: wid });
}
nav.find('ul li a').click(function (e) {
e.preventDefault();
if (!$(this).parent().hasClass('active') && !nav.hasClass('animate')) {
nav.addClass('animate');
var _this = $(this);
nav.find('ul li').removeClass('active');
var position = _this.parent().position();
var width = _this.parent().width();
if (position.left >= pos) {
line.animate({
width: position.left - pos + width },
300, function () {
line.animate({
width: width,
left: position.left },
150, function () {
nav.removeClass('animate');
});
_this.parent().addClass('active');
});
} else {
line.animate({
left: position.left,
width: pos - position.left + wid },
300, function () {
line.animate({
width: width },
150, function () {
nav.removeClass('animate');
});
_this.parent().addClass('active');
});
}
pos = position.left;
wid = width;
}
});
The CSS:
nav {
position: relative;
padding-bottom: 12px;
padding-top: 20px;
padding-right: 20px;
}
nav .line {
height: 2px;
position: absolute;
bottom: 0;
margin: 10px 0 0 0;
background: #ff4242;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
nav ul li {
margin: 0 40px 0 0;
opacity: .4;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
nav ul li:hover {
opacity: .7;
}
nav ul li.active {
opacity: 1;
}
nav ul li:last-child {
margin-right: 0;
}
nav ul li a {
text-decoration: none;
color: #fff;
text-transform: uppercase;
display: block;
font-weight: 600;
letter-spacing: .2em;
font-size: 14px;
}
And the HTML:
<nav>
<ul>
<li class="active">HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</nav>
Result it produces
You mean something like this?
nav {
position: relative;
padding-bottom: 12px;
padding-top: 20px;
padding-right: 20px;
padding-left: 20px;
background-color:darkgray;
position:fixed;
top:0;
right:0;
left:0;
}
nav .line {
height: 2px;
position: absolute;
bottom: 0;
margin: 10px 0 0 0;
background: #ff4242;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
nav ul li {
margin: 0 40px 0 0;
opacity: .4;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
nav ul li:hover {
opacity: .7;
}
nav ul li.active {
opacity: 1;
}
nav ul li:last-child {
margin-right: 0;
}
nav ul li a {
text-decoration: none;
color: #fff;
text-transform: uppercase;
display: block;
font-weight: 600;
letter-spacing: .2em;
font-size: 14px;
}
.home, .about, .contact {
height:800px;
text-align:center;
padding-top:50px;
color:#000;
font-size:50px;
}
.home {background-color:lightblue;}
.about {background-color:lightgreen;}
.contact {background-color:yellow;}
<html>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos > 0 ) {
$("li#home").css('background-color', 'blue');
} else {
$("li#home").css('background-color', '');
}
if(scroll_pos > 800) {
$("li#about").css('background-color', 'blue');
$("li#home").css('background-color', '');
} else {
$("li#about").css('background-color', '');
}
if(scroll_pos > 1600) {
$("li#contact").css('background-color', 'blue');
$("li#about").css('background-color', '');
} else {
$("li#contact").css('background-color', '');
}
});
});
</script>
<body>
<nav>
<ul>
<li id="home"><a href="#" >HOME</a></li>
<li id="about"><a href="#" >ABOUT</a></li>
<li id="contact"><a href="#" >CONTACT</a></li>
</ul>
</nav>
<div class="home">THIS IS HOME </div>
<div class="about">THIS IS ABOUT</div>
<div class="contact">THIS IS CONTACT</div>
</body>
</html>
Instead of writing this functionality on your own you could use a scrollspy plugin like Simple Scrollspy. You can check out the code on this Github repo.
I am trying to combine code from #David, with code from #Luisdanielroviracontreras to make a cool index menu for my portfolio case studies. So far I have been able to animate the item background when clicked:
https://codepen.io/andyradall/pen/BaKJpbM
But as you can see, I run into problems when trying to animate the background of the menu item based on scroll position. The background item ends up in the wrong place: https://codepen.io/andyradall/pen/WNwdRLq
Note. My problem:
specificity and selecting the right HTML elements in the js.
Attaching the active class to the button rather than just the a
Alternatively I need to remove the button and attach the .effect to the a
Here is the current code for my hightlight navigation section:
// Header Sticky
window.onscroll = function() {myFunction()};
var header = document.getElementById("navigation");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
/* Header buttons Luis that attatches active to buttons on click. */
/*
const buttons = document.querySelectorAll('.header-navbar button')
const effect = document.querySelector('.effect')
buttons.forEach((item) => {
item.addEventListener('click', (evt) => {
const x = evt.target.offsetLeft
buttons.forEach((btn) => { btn.classList.remove('active') })
evt.target.classList.add('active')
anime({
targets: '.effect',
left: `${x}px`,
duration: 600,
})
})
})
*/
/* header buttons on scroll from #Daniel at stackoverflow that misses the buttons and only attatches the active to the link*/
// caches the navigation links
var $navigationLinks = $('#navigation > ul > li > a');
// what I really want:
/*var buttons = document.querySelectorAll('.header-navbar button')
var effect = document.querySelector('.effect')*/
// cache (in reversed order) the sections
var $sections = $($(".section").get().reverse());
// map each section id to their corresponding navigation link
// here i really want to map each section id to the corresponding button
var sectionIdTonavigationLink = {};
$sections.each(function() {
var id = $(this).attr('id');
sectionIdTonavigationLink[id] = $('#navigation > ul > li > a[href=\\#' + id + ']');
});
// throttle function, enforces a minimum time interval
function throttle(fn, interval) {
var lastCall, timeoutId;
return function () {
var now = new Date().getTime();
if (lastCall && now < (lastCall + interval) ) {
// if we are inside the interval we wait
clearTimeout(timeoutId);
timeoutId = setTimeout(function () {
lastCall = now;
fn.call();
}, interval - (now - lastCall) );
} else {
// otherwise, we directly call the function
lastCall = now;
fn.call();
}
};
}
function highlightNavigation() {
// get the current vertical position of the scroll bar
var scrollPosition = $(window).scrollTop();
const effect = document.querySelector('.effect')
// iterate the sections
$sections.each(function() {
var currentSection = $(this);
// get the position of the section
var sectionTop = currentSection.offset().top;
var x = currentSection.offset().top;
console.log(x);
// if the user has scrolled over the top of the section
if (scrollPosition >= sectionTop) {
// get the section id
var id = currentSection.attr('id');
// get the corresponding navigation link
var $navigationLink = sectionIdTonavigationLink[id];
// if the link is not active
if ($navigationLink.hasClass('active')) {
// remove .active class from all the links
$navigationLinks.removeClass('active');
// add .active class to the current link
$navigationLink.addClass('active')
anime({
targets: '.effect',
left: `${x}px`,
duration: 600,
});
}
// we have found our section, so we return false to exit the each loop
return false;
}
});
}
$(window).scroll( throttle(highlightNavigation,100) );
// if you don't want to throttle the function use this instead:
//$(window).scroll( highlightNavigation );
/* Global */
* {
list-style: none;
outline: none;
padding: 0;
margin: 0;
font-family: 'Poppins', sans-serif;
box-sizing: border-box;
}
body {
--primary: 25,91,255;
--color: 44, 62, 80;
display: flex;
align-items: flex-start;
justify-content: center;
background: #f4f7f8;
/* height: calc(var(--vh, 1vh) * 100); */
/* overflow: hidden; */
color: rgb(var(--color));
width: 100%;
}
main {
width: 100%;
}
/* .sticky attatch to #navigation on scroll past #navigation */
.sticky {
position: fixed;
top: 0;
}
.header-navbar ul {
list-style: none;
display: flex;
align-items: center;
justify-content: space-evenly;
width: 100%;
background: #fff;
}
.header-navbar {
display: flex;
align-items: center;
justify-content: space-evenly;
width: 100%;
background: #fff;
padding: 24px 8px 24px 8px;
box-shadow: 0px 0px 30px 0px rgba(0,0,0,.05);
}
.header-navbar button {
width: 140px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
border: 0px;
background: transparent;
border-radius: 20px;
transition: all .25s ease;
}
/*.header-navbar a {
width: 160px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border: 0px;
background: transparent;
border-radius: 20px;
transition: all .25s ease;
}*/
.header-navbar a{
/*color: #333; */
font-size: 1rem;
padding: 10px 10px 10px 10px;
text-decoration: none;
}
/* to use if adding back link*/
.header-navbar a:active:not(.float) {
transform: scale(1.2);
}
.header-navbar button.active {
color: rgb(232, 76, 79);
}
/* if icon not text */
.header-navbar button i {
font-size: 1.2rem;
pointer-events: none;
}
/*background effect*/
.con-effect {
position: absolute;
width: 100%;
height: 100%;
/*top: 0px;
left: 0px;*/
overflow: hidden;
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
}
.effect {
background: rgba(232, 76, 232, 0.15);
width: 160px;
height: 70px;
position: absolute;
left: 100px;
border-radius: 20px;
}
/* Content sections styling */
.hero {
width:100%;
padding: 32px;
}
.section{
width:100%;
height: 500px;
padding: 32px;
}
#first {
background-color: #8face0;
}
#second {
background-color: #a388e8;
}
#third {
background-color: #f4769e;
}
#fourth {
background-color: #8face0;
}
#fifth {
background-color: #a388e8;
}
#bottom-spacer {
height: 2200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js></script>
<body>
<main>
<section id="intro" class="hero">
<div>
<h1>This will be the hero section</h1>
</div>
</section>
<div id="navigation" class="header-navbar">
<div class="con-effect">
<div class="effect"></div>
</div>
<ul>
<li><button>Introduction</button></li>
<li><button>1. User research</button></li>
<li><button>2. Ideation</button></li>
<li><button>3. Design phase</button></li>
<li><button>4. Testing</button></li>
<li><button>5. Results</button></li>
</ul>
</div>
</div>
<section class="sections">
<section id="first" class="section">
<h2>1. User research</h2>
</section>
<section id="second" class="section">
<h2>2. Ideate</h2>
</section>
<section id="third" class="section">
<h2>3. Design phase</h2>
</section>
<section id="fourth" class="section">
<h2>4. Testing</h2>
</section>
<section id="fifth" class="section">
<h2>5. Results</h2>
</section>
<section id="bottom-spacer">
</section>
</section>
</main>
</body>
Finally solve it!
Solution:
Find the active navigationlink offset left, store it in var x
Use navigationlink offset left value (x) to place the background effect
Now, there is only styling and finetuning left :)
Final will receive updates here: https://codepen.io/andyradall/pen/WNwdRLq
// sticky header
window.onscroll = function() {myFunction()};
var header = document.getElementById("navigation");
//var effectClass = document.getElementById("effectClass")
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
//effectClass.classList.add("effect")
} else {
header.classList.remove("sticky");
//effectClass.classList.remove("effect")
}
}
// cache the navigation links
var $navigationLinks = $('#navigation > ul > li > a');
// cache (in reversed order) the sections
var $sections = $($(".section").get().reverse());
// map each section id to their corresponding navigation link
var sectionIdTonavigationLink = {};
$sections.each(function() {
var id = $(this).attr('id');
sectionIdTonavigationLink[id] = $('#navigation > ul > li > a[href=\\#' + id + ']');
});
// throttle function, enforces a minimum time interval
function throttle(fn, interval) {
var lastCall, timeoutId;
return function () {
var now = new Date().getTime();
if (lastCall && now < (lastCall + interval) ) {
// if we are inside the interval we wait
clearTimeout(timeoutId);
timeoutId = setTimeout(function () {
lastCall = now;
fn.call();
}, interval - (now - lastCall) );
} else {
// otherwise, we directly call the function
lastCall = now;
fn.call();
}
};
}
function highlightNavigation() {
// get the current vertical position of the scroll bar
var scrollPosition = $(window).scrollTop();
const effect = document.querySelector('.effect')
// iterate the sections
$sections.each(function() {
var currentSection = $(this);
// get the position of the section
var sectionTop = currentSection.offset().top;
// if the user has scrolled over the top of the section
if (scrollPosition >= sectionTop) {
// get the section id
var id = currentSection.attr('id');
// get the corresponding navigation link
var $navigationLink = sectionIdTonavigationLink[id];
// if the link is not active
if (!$navigationLink.hasClass('active')) {
// remove .active class from all the links
$navigationLinks.removeClass('active');
// add .active class to the current link
$navigationLink.addClass('active');
var x = $navigationLink.offset().left;
anime({
targets: '.effect',
left: `${x-28}px`,
duration: 600,
endDelay: 1000,
})
}
// we have found our section, so we return false to exit the each loop
return false;
}
});
}
$(window).scroll( throttle(highlightNavigation,100) );
// if you don't want to throttle the function use this instead:
// $(window).scroll( highlightNavigation );
* {
list-style: none;
outline: none;
padding: 0;
margin: 0;
font-family: 'Poppins', sans-serif;
box-sizing: border-box;
}
body {
--primary: 25,91,255;
--color: 44, 62, 80;
display: flex;
align-items: flex-start;
justify-content: center;
background: #f4f7f8;
/* height: calc(var(--vh, 1vh) * 100); */
/* overflow: hidden; */
color: rgb(var(--color));
width: 100%;
}
main {
width: 100%;
}
/* .sticky attatch to #navigation on scroll past #navigation */
.sticky {
position: fixed;
top: 0;
}
.header-navbar ul {
list-style: none;
display: flex;
align-items: center;
justify-content: space-evenly;
width: 100%;
background: #fafafa;
}
.header-navbar {
display: flex;
align-items: center;
justify-content: space-evenly;
width: 100%;
background: #fafafa;
padding: 2px 0 2px 0;
box-shadow: 0 1px 2px rgba(0,0,0,0.06),
0 2px 4px rgba(0,0,0,0.06),
0 4px 8px rgba(0,0,0,0.06),
0 8px 16px rgba(0,0,0,0.06),
0 16px 32px rgba(0,0,0,0.06),
0 32px 64px rgba(0,0,0,0.06);
}
.header-navbar li {
width: 160px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border: 0px;
background: transparent;
border-radius: 20px;
transition: all .25s ease;
}
/*.header-navbar a {
width: 160px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border: 0px;
background: transparent;
border-radius: 20px;
transition: all .25s ease;
}*/
.header-navbar a{
color: #333;
font-size: 1rem;
/*padding: 8px 8px 8px 8px;*/
text-decoration: none;
}
/* :not excludes class for specific use */
.header-navbar a:active:not(.float) {
transform: scale(1.2);
}
.active {
color: rgb(232, 76, 79)!important;
}
.header-navbar a:active {
color: rgb(232, 76, 79)!important;
}
/* if icon not text */
.header-navbar a i {
font-size: 1.2rem;
pointer-events: none;
}
/*background effect*/
.con-effect {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
overflow: hidden;
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
}
.effect {
background: rgba(232, 76, 232, 0.15);
width: 178px;
height: 40px;
position: absolute;
left: 1px;
border-radius: 40px;
}
/* Content sections styling */
.hero {
width:100%;
padding: 32px;
}
.section{
color: #666;
width:100%;
/*height: 500px;*/
padding: 32px;
}
#first {
background-color: #8face0;
}
#second {
background-color: #a388e8;
}
#third {
background-color: #f4769e;
}
#fourth {
background-color: #8face0;
}
#fifth {
background-color: #a388e8;
}
#bottom-spacer {
height: 2200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<main>
<section id="intro" class="hero section">
<div>
<h1>This will be the hero section</h1>
</div>
</section>
<div id="navigation" class="header-navbar">
<div class="con-effect">
<div id="effectClass" class="effect"></div>
</div>
<ul>
<li>Introduction</li>
<li>1. User research</li>
<li>2. Ideation</li>
<li>3. Design phase</li>
<li>4. Testing</li>
<li>5. Results</li>
</ul>
</div>
<section class="sections">
<section id="first" class="section">
<h2>1. User research</h2>
</section>
<section id="second" class="section">
<h2>2. Ideate</h2>
</section>
<section id="third" class="section">
<h2>3. Design phase</h2>
</section>
<section id="fourth" class="section">
<h2>4. Testing</h2>
</section>
<section id="fifth" class="section">
<h2>5. Results</h2>
</section>
<section id="bottom-spacer">
</section>
</section>
</main>
</body>
Currently, I'm helping to build a website for a family member as part of a modeling club they have.
The website is at http://testindyamps.weebly.com/ .
It's a website on a host that utilizes various templates for themes (I haven't had much help so far from people on said site).
I'm not 100% sure if this ist he best place to post the question, but I thought I'd give it a shot.
The main issue is that it's utilizing a sidebar navigation where when you click the menus, it expands downward to show the subpages. In this case, not all the subpages are showing. (For example, clicking on "Articles" and then "Books" shows only the first few of a dozen or so pages.
I've tried editing the JS code itself, which so far has had no affect. I've tried editing some of the CSS, however, it doesn't seem to have an affect either.
If it helps, I can share osme of the CSS code or JS code for the site itself. Any help would be appreciated.
Thank you.
UPDATE: Added the code as requested.
Update 2: Added HTML: fixed to correct URL (using a test site instead of the "actual" site for the navigation).
jQuery(function($) {
// Mobile sidebars
$.fn.expandableSidebar = function(expandedClass) {
var $me = this;
$me.on('click', function() {
if(!$me.hasClass(expandedClass)) {
$me.addClass(expandedClass);
} else {
$me.removeClass(expandedClass);
}
});
}
// Interval loop
$.fn.intervalLoop = function(condition, action, duration, limit) {
var counter = 0;
var looper = setInterval(function(){
if (counter >= limit || $.fn.checkIfElementExists(condition)) {
clearInterval(looper);
} else {
action();
counter++;
}
}, duration);
}
// Check if element exists
$.fn.checkIfElementExists = function(selector) {
return $(selector).length;
}
// Check if desktop display
$.fn.isDesktop = function() {
return $(window).width() > 1024;
}
var briskController = {
init: function(opts) {
var base = this;
base._addClasses();
setTimeout(function(){
base._attachEvents();
}, 1000);
},
_addClasses: function() {
var base = this;
// Add fade in class to nav + logo + banner
$('body').addClass('fade-in');
// Keep subnav open if submenu item is active
$('.sidebar-nav .active').parents('.has-submenu').children('.dropdown').addClass('open');
// Add placeholder text to inputs
$('.wsite-form-sublabel').each(function(){
var sublabel = $(this).text();
$(this).prev('.wsite-form-input').attr('placeholder', sublabel);
});
},
_cloneLogin: function() {
var loginDetach = $('#member-login').clone(true);
$('.mobile-nav .wsite-menu-default > li:last-child').after(loginDetach);
},
_stickyNav: function() {
var sticky,
collapse,
uncollapse,
desktopsticky = $('body.nav-position-top.sticky-nav-on:not(.wsite-checkout-page):not(.wsite-native-mobile-editor), body.nav-position-top-right.sticky-nav-on:not(.wsite-checkout-page):not(.wsite-native-mobile-editor)').length,
mobilesticky = $('body.sticky-nav-on:not(.wsite-checkout-page):not(.wsite-native-mobile-editor)').length;
var stickyInit = function() {
if (!$.fn.isDesktop() || desktopsticky) {
// Add sticky desktop nav
sticky = new Waypoint.Sticky({
element: $('.header')[0]
});
}
if ($.fn.isDesktop() && desktopsticky) {
// Collapse header on scroll
collapse = new Waypoint({
element: $('body.nav-position-top.sticky-nav-on:not(.wsite-checkout-page):not(.wsite-native-mobile-editor)')[0],
handler: function(direction) {
$('body').addClass('collapse');
},
offset: -10
});
uncollapse = new Waypoint({
element: $('body.nav-position-top'),
handler: function(direction) {
$('body').removeClass('collapse');
},
offset: -5
});
}
}
stickyInit();
$(window).resize(function() {
if (sticky) { sticky.destroy() }
if (collapse) { collapse.destroy() }
if (uncollapse) { uncollapse.destroy() }
stickyInit();
});
},
_sidebarNav: function() {
// Fixed sidebar nav unless menu height exceeds viewport height
var sidebarCheck = function() {
if ($.fn.isDesktop() && $('body').hasClass('sticky-nav-on') && $('.header .container').height() + $('.header .contact').height() <= $(window).height() - 45) {
$('body.nav-position-sidebar .header').addClass('stuck');
}
else {
$('body.nav-position-sidebar .header').removeClass('stuck');
}
}
sidebarCheck();
$(window).resize(function() {
sidebarCheck();
});
},
_sidebarCart: function(){
$('#wsite-mini-cart').addClass('cart-init');
$('.wsite-nav-cart a').click(function() {
$('.cart-init').toggleClass('cart-visible');
});
$('.wrapper, .header').click(function() {
$('.cart-init').removeClass('cart-visible');
});
},
_attachEvents: function() {
var base = this;
// Hamburger nav toggle
$('.hamburger').on('click', function(e) {
e.preventDefault();
$('body').toggleClass('nav-open');
});
// Initialize sticky nav
base._stickyNav();
// Initialize sidebar nav
base._sidebarNav();
// Copy login
$.fn.intervalLoop('.mobile-nav #member-login', base._cloneLogin, 800, 5);
// Subnav toggle
$('li.has-submenu span.icon-caret, .dropdown-link').on('click', function() {
var $me = $(this);
if ($me.parent().hasClass('open')) {
$me.parent().removeClass('open');
$me.find('.open').removeClass('open');
}
else {
$('.open').removeClass('open');
$me.parents('.has-submenu').children('.dropdown').addClass('open');
}
setTimeout(function(){
base._sidebarNav();
}, 800);
});
// Sidebar Cart Link
$.fn.intervalLoop('.cart-init', base._sidebarCart, 1000, 5);
// Store category dropdown
$('.wsite-com-sidebar').expandableSidebar('sidebar-expanded');
// Search filters dropdown
$('#wsite-search-sidebar').expandableSidebar('sidebar-expanded');
// Init fancybox swipe on mobile
if ('ontouchstart' in window) {
$('body').on('click', 'a.w-fancybox', function() {
base._initSwipeGallery();
});
}
},
_initSwipeGallery: function() {
var base = this;
setTimeout(function(){
var touchGallery = document.getElementsByClassName('fancybox-wrap')[0];
var mc = new Hammer(touchGallery);
mc.on("panleft panright", function(ev) {
if (ev.type == "panleft") {
$("a.fancybox-next").trigger("click");
} else if (ev.type == "panright") {
$("a.fancybox-prev").trigger("click");
}
base._initSwipeGallery();
});
}, 500);
}
}
$(document).ready(function(){
briskController.init();
});
});
/* Header */
.header {
position: relative;
width: 100%;
color: #fill;
background: #bg;
border-bottom: 1px solid fade(#fill, 5);
box-sizing: border-box;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
z-index: 12;
.hamburger,
.contact,
.desktop-nav,
.sidebar-nav {
display: none;
}
}
body.nav-open {
overflow: hidden;
#media #tablet-up {
overflow: auto;
}
}
body:not(.nav-position-sidebar),
body.nav-position-top,
body.nav-position-top-right {
#media #tablet-up {
.header {
position: relative;
padding: 10px 40px;
border-bottom: none;
.transition(~'padding 280ms ease');
.container {
display: table;
overflow-y: hidden;
width: 100%;
height: 80px;
.transition(~'height 280ms ease');
}
.logo {
display: table-cell;
text-align: left;
vertical-align: middle;
max-height: 80px;
overflow: hidden;
a {
padding: 5px 20px 5px 0;
}
}
.desktop-nav {
display: table-cell;
}
.nav {
li {
display: inline-block;
}
a {
padding: 10px 20px;
}
}
.membership-cart {
display: table-cell;
width: 5%;
text-align: right;
white-space: nowrap;
span {
display: inline-block;
}
}
}
&.collapse {
.header {
padding: 5px 40px;
border-bottom: 1px solid fade(#fill, 5);
.container {
height: 40px;
}
}
}
&.full-width-nav-off .header .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 40px;
box-sizing: border-box;
}
}
}
body.nav-position-top-right {
.desktop-nav {
text-align: right;
}
}
.stuck {
position: fixed !important;
top: 0;
}
body.nav-position-sidebar {
#media #tablet-up {
.header {
position: absolute;
top: 0;
left: 0;
width: 260px;
min-height: 100vh;
padding: 40px;
border-bottom: none;
display: flex;
flex-direction: row;
> .nav-wrap {
width: 100%;
min-height: calc(~'100vh - 80px');
display: flex;
flex-direction: column;
> .container {
flex: 1 0 auto;
}
}
.sidebar-nav {
display: block;
}
.nav {
li {
display: block;
}
a {
display: block;
padding: 10px 0;
}
}
.logo {
margin: 0 auto 30px;
}
.membership-cart > span {
display: block;
}
}
.contact {
display: block;
}
.wsite-phone {
display: block;
font-size: 15px;
color: fade(#fill, 40);
padding: 40px 0 0;
text-align: left;
&:before {
content: '';
display: block;
width: 60%;
padding-bottom: 40px;
border-top: 1px solid fade(#fill, 20);
}
}
.wrapper {
background: #bg;
padding-left: 260px;
box-sizing: border-box;
}
}
}
.logo {
* {
display: block;
}
a {
color: #primary;
&:hover {
opacity: 0.6;
background: transparent;
.transition(opacity 200ms ease);
}
}
#wsite-title {
font-family: #font1;
font-size: 30px;
font-weight: 500;
line-height: 1;
text-transform: uppercase;
letter-spacing: 0.08em;
}
img {
overflow: hidden;
max-width: 300px;
max-height: 70px;
}
.wsite-logo {
overflow: hidden;
max-width: 100%;
max-height: 70px;
}
}
/* Nav */
.nav {
vertical-align: middle;
a {
display: block;
color: #fill;
font-family: #font1;
font-size: 15px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.05em;
text-transform: lowercase;
&:hover {
opacity: 0.6;
background: transparent;
.transition(opacity 200ms ease);
}
}
.active {
color: darken(#primary, 10%) !important;
}
#wsite-nav-cart-a {
padding-right: 0;
}
#wsite-nav-cart-num {
position: relative;
display: inline-block;
background: mix(#primary, #bg, 60%);
color: #fill;
min-width: 25px;
padding: 7px 2px;
text-align: center;
border-radius: 100%;
z-index: 2;
#media #tablet-up {
margin: 0 -6px;
}
}
}
.mobile-nav {
display: none;
}
/* Subnav */
#wsite-menus {
> .wsite-menu-wrap {
margin-top: 10px;
}
> .wsite-menu-wrap > .wsite-menu .wsite-menu {
margin: 0 -1px;
}
.wsite-menu {
position: relative;
background: #bg;
.box-shadow(inset 0px 0px 0px 1px fade(#fill, 3));
li a {
padding: 12px 20px;
background: transparent;
color: #fill;
font-family: #font1;
font-size: 14px;
font-weight: normal;
line-height: normal;
text-transform: lowercase;
letter-spacing: 0.05em;
border: none;
&:hover {
opacity: 0.6;
background: transparent;
.transition(opacity 200ms ease);
}
}
}
.wsite-menu-arrow {
display: none;
}
}
/* Sidebar and Mobile Subnav */
.sidebar-nav,
.mobile-nav {
li {
position: relative;
border-color: fade(#fill, 80);
}
.wsite-menu {
padding-left: 5px;
color: fade(#fill, 50);
border-color: fade(#fill, 50);
a {
color: fade(#fill, 50);
}
}
.wsite-menu-wrap {
display: block !important;
overflow: hidden;
max-height: 0;
.transition(all 600ms ease-in-out);
}
.wsite-menu-wrap li.wsite-nav-current > a.wsite-menu-subitem {
background: rgba(0, 0, 0, 0.95);
border: none;
}
.wsite-menu-wrap .wsite-menu-arrow {
display: none;
}
.dropdown {
display: table;
width: 100%;
&:hover {
.icon-caret {
opacity: 0.6;
background: transparent;
}
}
> .icon-caret,
> .dropdown-link {
display: table-cell !important;
vertical-align: top;
a {
display: inline-block !important;
}
}
.icon-caret {
width: 15px;
cursor: pointer;
.transition(all 200ms ease-in-out);
&:before {
content: '';
position: relative;
display: block;
width: 5px;
height: 5px;
border: solid transparent;
border-width: 0 1px 1px 0;
border-color: inherit;
.transform(~'rotate(45deg)');
}
}
&.open span.icon-caret:before {
top: 5px;
.transform(~'rotate(-135deg)');
}
&.open + .wsite-menu-wrap {
width: 100%;
max-height: 1000px;
}
}
}
.sidebar-nav {
.has-submenu > .dropdown span.icon-caret {
padding: 12px 0 8px 10px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body class="no-header-page">
<div class="header">
<div class="nav-wrap">
<div class="container">
<a class="hamburger" aria-label="Menu" href="#"><span></span></a>
<div class="logo">{logo}</div>
<div class="nav desktop-nav">{menu}</div>
<div class="nav sidebar-nav"><div class="nav-wrap">{menu}</div></div>
<div class="nav membership-cart">{membership}{minicart}</div>
</div>
<div class="nav contact">{phone:text}</div>
</div>
</div>
<div class="wrapper">
<div class="main-wrap">
{{#sections}}
<div class="container">{content}</div>
{{/sections}}
</div>
<div class="footer-wrap">
<div class="footer">{footer}</div>
</div>
</div>
<div class="nav mobile-nav">
<a class="hamburger" aria-label="Menu" href="#"><span></span></a>
{menu}
</div>
<script type="text/javascript" src="/files/theme/plugins.js"></script>
<script type="text/javascript" src="/files/theme/custom.js"></script>
</body>
</html>
The reason not all elements are showing is because of this:
.sidebar-nav .dropdown.open + .wsite-menu-wrap, .mobile-nav .dropdown.open + .wsite-menu-wrap {
width: 100%;
max-height: 1000px;
}
The element is expanded by changing the max-height from 0px to 1000px. The elements in your menu exceed 1000px and they get cut off.
This is actually a pretty comman problem when using CSS transitions to expand elements. CSS transitions only work on height if height is set to an exact value. You can read more about it here: https://css-tricks.com/using-css-transitions-auto-dimensions/
The max-height trick offers a work-around. But it has its draw-back - if the elements expands beyond the value of max-height it gets cut off.
The simplest solution is to simply increase the value of max-height, until all your elements show. This will work, but it' s not ideal if in the future the element expands even more.
More sophisticated (and arguably better) solutions can be found in the css-tricks web page above.
Still, are you sure it's a good idea do display such an enormous amount of of links in an accordion menu? Wouldn't it be better to rethink the navigation, perhaps have a separate page with all the books?
I am trying to make a Navbar which changes it's image/logo, background color & font color when i scroll down a little however nothing i have tried so far has worked
Also want the image that appears when i scroll down to have the same width and height as the previous one
Here's my code
Js :
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 1000) {
$('.navbar .navbar-brand img').attr('src','https://www.luatix.org/wp-content/uploads/2018/12/logo_menu_text.png');
}
if ($(this).scrollTop() < 1000) {
$('.navbar .navbar-brand img').attr('src','https://www.luatix.org/wp-content/uploads/2018/12/logo_menu_text_white.png');
}
})
});
$(function () {
$(document).scroll(function () {
var $nav = $(".navbar-brand");
$nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
});
});
As others have mentioned, you are not importing jQuery in your codepen, so the code you wrote there will not work; by including it you should see the logo changing; however the scrollTop() > 1000 is too much, maybe reduce it to like 50 and you'll see the image of the logo actually change after you scroll
$(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 50) {
$('.navbar .navbar-brand img').attr('src', 'https://www.luatix.org/wp-content/uploads/2018/12/logo_menu_text.png');
}
if ($(this).scrollTop() < 50) {
$('.navbar .navbar-brand img').attr('src', 'https://www.luatix.org/wp-content/uploads/2018/12/logo_menu_text_white.png');
}
})
});
$(function() {
$(document).scroll(function() {
var $nav = $(".navbar-brand");
$nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
});
});
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/* Global */
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
/* Header **/
header {
background-color: #00695c;
color: #ffffff;
padding-top: 30px;
min-height: 70px;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1;
}
header a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 10px;
}
header .highlight,
header .current a {
font-weight: bold;
}
header a:hover {
color: #cccccc;
font-weight: bold;
}
.navbar-brand.scrolled {
background-color: #fff;
transition: background-color 200ms linear;
}
<!-- Make sure to add this import -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="navbar">
<div class="container">
<div id="branding" class="navbar-brand">
<img src="https://www.luatix.org/wp-content/uploads/2018/12/logo_menu_text_white.png" alt="" width="123" height="50" style="height:100%;">
</div>
<nav>
<ul>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<div class="space" style="height:1400px;"></div>
Are you sure you have jquery well imported, it works in my compute.
You need to import jQuery. Here is the code you need: This is their slim / min core link.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
I've been making some test, So I suggest your something like this:
$(function() {
var header = $(".header");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 200) {
header.removeClass('header').addClass("header-alt");
} else {
header.removeClass("header-alt").addClass('header');
}
});
});
.header {
height: 200px;
background-color: rgba(0,0,0,0.5);
position: fixed;
top: 200;
width: 100%;
transition: all 0.5s;
}
.header img {
background: url(https://www.w3schools.com/tags/smiley.gif) no-repeat;
}
.header-alt {
height: 100px;
background-color: rgba(0,0,0, 0.8);
position: fixed;
top: 200;
width: 100%;
transition: all 0.5s;
color: blue;
}
.header-alt img{
background: url(https://www.w3schools.com/html/pic_trulli.jpg) no-repeat;
}
.otherSection {
height: 2000px;
padding-top: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="header">
<img class="img" width="42" height="42">
<h1>I'm a navigation bar<h1/>
</header>
<div class="otherSection">
Hello World
</div>
I have made a fiddle here
navlist = [];
$("#navlist a").each(function(i) {
var thisLink = $(this);
var thisId = thisLink.attr('href');
var thisTarget = $(thisId);
navlist.push({
'anchor': thisLink,
'id': thisId,
'target': thisTarget
});
thisLink.on('click', function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: thisTarget.offset().top
}, 800);
});
});
$(window).on('scroll resize', function(e) {
$.each(navlist, function(e, elem) {
var placement = elem.target[0].getBoundingClientRect();
if (placement.top < window.innerHeight && placement.bottom > 0) {
history.pushState({}, '', elem.id);
console.log('Hash: ' + elem.id);
return false; /* Exit $.each loop */
};
});
});
//show phone triggering at height 150px from 1st DIV
$(window).scroll(function () {
console.log($(window).scrollTop());
var topDivHeight = $("#first").height();
var viewPortSize = $(window).height();
var triggerAt = 150;
var triggerHeight = (topDivHeight - viewPortSize) + triggerAt;
if($(window).scrollTop() >= triggerHeight) {
$('.phone').css('visibility', 'visible').hide().fadeIn();
$(this).off('scroll');
}
});
#first {
height: 100vh;
background: #F06A59;
}
#second {
height: 100vh;
background: #FB3E47;
}
#third {
height: 100vh;
background: #FFA306;
}
#fourth {
height: 100vh;
background: #528AFC;
}
#fifth {
height: 100vh;
background: #52FC6C;
}
#fifth {
height: 100vh;
background: #52FC6C;
}
#sixth {
height: 100vh;
background: #CFDA25;
}
.header {
width: 100%;
position: absolute;
padding: 20px
}
.nav {
position: fixed;
width: 100%;
}
.nav ul {
list-style: none;
}
.nav ul li {
display: inline;
font-size: 18px;
margin-bottom: 40px;
font-family: Georgia, "Times New Roman", Times, serif;
}
.nav ul li a {
text-decoration: none;
color: #000;
padding: 10px 5px 10px 70px;
font-family: agency fb;
font-weight: bold;
font-size: 36px;
text-shadow: 1px 2px 4px #000000;
}
.nav ul li a:hover {
color: #fff;
text-shadow: 1px 6px 4px #000000;
transition: all 0.4s ease-in-out;
}
.nav-active {
color: red !important;
}
.phone {
left: 43%;
top: 28%;
position: fixed;
background: url(https://fueled.com/assets/images/home/project-phone--iphone.png) no-repeat;
background-size: 250px 500px;
padding: 70px 25px 75px 25px;
display: block;
visibility: hidden;
}
.phone-inner {
width: 200px;
height: 355px;
border: 1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
<div class="nav">
<ul id="navlist">
<li>Home</li>
<li>Features</li>
<li>About Us</li>
</ul>
</div>
<div class="phone" align="center">
<div class="phone-inner"></div>
</div>
</div>
<section>
<div class="main" id="first">
<video width="100%" autoplay="" loop="" muted>
<source src="vid/vids.mp4" type="video/mp4">
</video>
</div>
</section>
<section>
<div class="main" id="second"> </div>
</section>
<section>
<div class="main" id="third"></div>
</section>
There you can see that when I scroll down the phone is shown triggering at height 150px. That is what I want so okay till here. But when I scroll back up to the 1st div it should fade out and hide. I tried to do it but failed. I want to make it in a way that its not shown in 1st and last div (it should only be shown in the middle div's). Say for example I have five sections there of divisions. It should start showing as it is now and should be visible till 4th div. Once 5th div comes into viewport it should fadeout and hide. And similarly when I scroll back to the 1st div it should fade out and hide again and repeat the process on scroll up and scroll down.
Please help me devs.
In code after showing the phone you are using this $(this).off('scroll') this unbinding the scroll
This may help you
$(window).scroll(function () {
console.log($(window).scrollTop());
var topDivHeight = $("#first").height();
var viewPortSize = $(window).height();
var lastDivHeight = $("#third").height()+viewPortSize;
var triggerAt = 150;
var triggerHeight = (topDivHeight - viewPortSize) + triggerAt;
console.log(lastDivHeight);
if($(window).scrollTop() >= triggerHeight && $(window).scrollTop() <= lastDivHeight) {
$('.phone').css('visibility', 'visible').fadeIn();
}
else{
$('.phone').css('visibility', 'hidden').fadeOut();
}
});
You can use an else statement to hide it if it dont match the if
if ($(window).scrollTop() >= triggerHeight) {
$('.phone').css('visibility', 'visible').show().fadeIn();
} else {
$('.phone').css('visibility', 'hidden').fadeOut();
}
Also remove $(this).off('scroll'); then it should work
NOTE I've also changed your .phone class a bit
.phone {
left: 43%;
top: 28%;
position: fixed;
background: url(https://fueled.com/assets/images/home/project-phone--iphone.png) no-repeat;
background-size: 250px 500px;
padding: 70px 25px 75px 25px;
display: none; // <--- changed
//visibility : hidden // <--- removed
}
Update update with answer to your question about last div
var DivTop = $("#fifth").position().top;
if ($(window).scrollTop() >= triggerHeight && $(window).scrollTop() < DivTop)
Working example.
navlist = [];
$("#navlist a").each(function(i) {
var thisLink = $(this);
var thisId = thisLink.attr('href');
var thisTarget = $(thisId);
navlist.push({
'anchor': thisLink,
'id': thisId,
'target': thisTarget
});
thisLink.on('click', function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: thisTarget.offset().top
}, 800);
});
});
$(window).on('scroll resize', function(e) {
$.each(navlist, function(e, elem) {
var placement = elem.target[0].getBoundingClientRect();
if (placement.top < window.innerHeight && placement.bottom > 0) {
history.pushState({}, '', elem.id);
return false; /* Exit $.each loop */
};
});
});
var mainTops = [];
$('.main').each(function() {
mainTops.push($(this).position().top)
});
//show phone triggering at height 150px from 1st DIV
$(window).scroll(function() {
var topDivHeight = $("#first").height();
var DivTop = $("#fifth").position().top;
var viewPortSize = $(window).height();
var triggerAt = 150;
var triggerHeight = (topDivHeight - viewPortSize) + triggerAt;
var count = 0;
var number = jQuery.grep(mainTops, function(n, i) {
if (n <= $(window).scrollTop())
{
count++;
}
});
$('.nav ul li a').css("color", "#000");
$('.nav ul li a#nav'+count ).css("color", "#fff");
if ($(window).scrollTop() >= triggerHeight && $(window).scrollTop() < DivTop) {
$('.phone').css('visibility', 'visible').show().fadeIn();
} else {
$('.phone').css('visibility', 'hidden').fadeOut();
}
});
*{
margin:0;
padding:0}
#first {
height: 100vh;
background: #F06A59;
}
#second {
height: 100vh;
background: #FB3E47;
}
#third {
height: 100vh;
background: #FFA306;
}
#fourth {
height: 100vh;
background: #528AFC;
}
#fifth {
height: 100vh;
background: #52FC6C;
}
#fifth {
height: 100vh;
background: #52FC6C;
}
#sixth {
height: 100vh;
background: #CFDA25;
}
.header {
width: 100%;
position: absolute;
padding: 20px
}
.nav {
position: fixed;
width: 100%;
}
.nav ul {
list-style: none;
}
.nav ul li {
display: inline;
font-size: 18px;
margin-bottom: 40px;
font-family: Georgia, "Times New Roman", Times, serif;
}
.nav ul li a {
text-decoration: none;
color: #000;
padding: 10px 5px 10px 70px;
font-family: agency fb;
font-weight: bold;
font-size: 36px;
text-shadow: 1px 2px 4px #000000;
}
.nav ul li:first-of-type a{
color: #fff;
}
.nav ul li a:hover {
color: #fff;
text-shadow: 1px 6px 4px #000000;
transition: all 0.4s ease-in-out;
}
.nav-active {
color: red !important;
}
.phone {
left: 43%;
top: 28%;
position: fixed;
background: url(https://fueled.com/assets/images/home/project-phone--iphone.png) no-repeat;
background-size: 250px 500px;
padding: 70px 25px 75px 25px;
display: none;
}
.phone-inner {
width: 200px;
height: 355px;
border: 1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
<div class="nav">
<ul id="navlist">
<li>Home
</li>
<li>Features
</li>
<li>About Us
</li>
<li>fourth
</li>
<li>fifth
</li>
</ul>
</div>
<div class="phone" align="center">
<div class="phone-inner"></div>
</div>
</div>
<section>
<div class="main" id="first">
<video width="100%" autoplay="" loop="" muted>
<source src="vid/vids.mp4" type="video/mp4">
</video>
</div>
</section>
<section>
<div class="main" id="second"></div>
</section>
<section>
<div class="main" id="third"></div>
</section>
<section>
<div class="main" id="fourth"></div>
</section>
<section>
<div class="main" id="fifth"></div>
</section>
Updated code to solve color change on entering new section:
var mainTops = [];
$('.main').each(function() {
mainTops.push($(this).position().top)
});
var count = 0;
var number = jQuery.grep(mainTops, function(n, i) {
if (n < $(window).scrollTop())
{
count++;
}
});
$('.nav ul li a').css("color", "#000");
$('.nav ul li a#nav'+count ).css("color", "#fff");