We Keep Coding

How to keep class active when scrolling with javascript?

I need help figuring out what is going on with my javascript. I have some code that is supposed to make the nav links have an active class when you are on that part of the page, but it's only sort of working for a couple links and it also flickers as you scroll rather than staying active the whole time you're on that part of the page. See the JSFiddle for an example https://jsfiddle.net/7szpuqsr/ -- if you scroll slowly you can see how "home" becomes active for a moment. I am trying to get each link to have the active class when you click it and also while you are on that entire part of the page.
I also have a javascript sticky nav bar and smooth scrolling working so I don't know if possibly any of that is getting in the way? Thanks in advance for help.
Here's the Javascript I'm trying to use for the active class:
var sections = $('section')
, nav = $('nav')
, nav_height = nav.outerHeight();
$(window).on('scroll', function () {
var cur_pos = $(this).scrollTop();
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
}, 500);
return false;
});

Something like this? I couldn't reproduce the flickering visually on my machine but I can see the class being removed/added constantly on scroll
https://jsfiddle.net/7szpuqsr/1/
Main changes, I added a class to your sections, you have too many sections but with the way your code is meant to work, it's much easier to add a class to the sections, example below
<section id="home" class="section">
var sections = $('.section') to get the section class
updated this part of the js to check for active class
if (cur_pos >= top && cur_pos <= bottom) {
if(!$(this).hasClass("active")) {
nav.find('a').removeClass('active');
sections.removeClass('active');
$(this).addClass('active');
nav.find('a[href="#'+$(this).attr('id')+'"]').addClass('active');
}
}
You can also cache the $(this) into a variable inside of the section loop like
var $this = $(this);
then just use $this for the rest of the loop
here is the doc for hasClass https://api.jquery.com/hasclass/

How to Make a certain Div ID show at and after a different Div ID with jQuery

I am trying to make a jQuery code so that my Menu will be hidden on the top section of a page and appear when it is at or past a certain div ID. I have written what I best can to achieve this but is not working. Can anyone help me configure it properly? Thank you.
jQuery (function($){
var topHeader = $('#top-header');
var mainSlider = $('#pbf-main-slider');
if (topHeader >= mainSlider) {
topHeader.show();
} else {
topHeader.hide();
}
});
menu hidden area
menu show area
Final Outcome (I added another section of the menu that needed this function)
jQuery (function($){
var topHeader = $('#top-header');
var mainHeader = $('#main-header');
var mainSlider = $('#pbf-main-slider');
var mainSliderHeight = mainSlider.outerHeight(true);
$(window).scroll(function () {
var scrollTop = $(this).scrollTop(); //get the scroll position
if (scrollTop >= mainSliderHeight) {
topHeader.slideDown(1000);
mainHeader .slideDown(1000);
}
else {
topHeader.hide(500);
mainHeader .hide(500);
}
})
});

you should get the height of the main slider, like this:
var mainSlider = $('#pbf-main-slider');
var mainSliderHeight = mainSlider.outerHeight(true);
then make the top bar appear if the scroll is past the mainSlider's height, like this:
$(window).scroll(function () {
var scrollTop = $(this).scrollTop(); //get the scroll position
if (scrollTop >= mainSliderHeight) {
topHeader.show();
}
else {
topHeader.hide();
}
}

highlighting current section on scroll - gap between sections

I have a page with different sections that can be scrolled to or accessed by clicking the corresponding link in the navbar. A demo of the page is on codepen http://codepen.io/meek/pen/NNprYb?editors=1010
I am using the following code to keep track of which section the user is scrolling over and highlighting it in the navbar
$(window).on("scroll", function() {
var currentPos = $(window).scrollTop();
$('.nav li a').each(function() {
var sectionLink = $(this);
var section = $(sectionLink.attr('href'));
if(section.position().top <= currentPos && section.position().top + section.height() > currentPos) {
$('.nav li').removeClass('active');
sectionLink.parent().addClass('active');
}
else {
sectionLink.parent().removeClass('active');
}
});
});
It works fine, but there is a gap where scrolling through between home and about sections, none of the links are highlighted. I have a feeling this might be because of the space the navbar occupies between home and about, but I'm not sure how to overcome this. Ideally, I'd like to have that gap also highlight "about".
I've tried to add this to the above code:
else if($('#nav-wrapper').position().top <= currentPos && $('#nav-wrapper').position().top + $('#nav-wrapper').height() > currentPos) {
$('.nav li').removeClass('active');
$('#temp').addClass('active');
}
but it doesn't work. Help appreciated

Solution:
Adjust your if statement in your scroll event to match the following.
if(section.position().top <= currentPos && sectionLink.offset().top + section.height() > currentPos)
The key being, the second instance of section.position().top changes to sectionLink.offset().top

sticky sidebars in several div

i got for each div an sidebar and i wanted do get all the sidebars by scrolling down fixed.
you can find it here
var tmpWindow = $(window),
sidebar = $('.sidebar'),
sidebarHeight = sidebar.height(),
offsetBottom = $('.content').outerHeight();
$(window).scroll(function() {
if ($(window).scrollTop() >= sidebarHeight) {
$('.sidebar').addClass('fixed');
alert(sidebarHeight);
} else {
$('.sidebar').addClass('fixed');
}
});
http://jsfiddle.net/dLdvv6um/
if i use the js it will disappear...

You're adding a class called "fixed", yet you don't have a class with that name specified in your css. Use .css() if you want to add straight css properties instead: .css({"position": "fixed"});.

JQuery Add Class when bottom of div reaches top

I am trying to add a class when the bottom of a div reaches the top of the window, but am not sure of how to do it.
I have managed to add the class when the top of the div gets to the top of the window, but am not having much luck with the bottom of the div.
Code I am using:
$(document).ready(function() {
var menuLinksTop = $('.container').offset().top;
var menuLinks = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > menuLinksTop) {
$('header').addClass('black-links');
} else {
$('header').removeClass('black-links');
}
};
menuLinks();
$(window).scroll(function() {
menuLinks();
});
Any help is appreciated.

You should use javascript's getBoundingClientRect() method, watch $(window).scroll event, and look at element's rectangle, its bottom value will give you what you need (if it's negative, your element is all the way up)
$(window).scroll(function() {
console.log($("div.watch")[0].getBoundingClientRect());
if ($("div.watch")[0].getBoundingClientRect().bottom < 0)
alert ("i'm out :3");
});
see jsFiddle http://jsfiddle.net/ja5nnbwr/2/

Add the height of the div. Assuming it is the .container :
var menuLinksTop = $('.container').offset().top + $('.container').height();