We Keep Coding

How To Detect A Specific CSS Class With JavaScript On Scrolling?

I have a fixed sidebar navigation menu on my WordPress website. The navigation menu contains custom made icons. One set of icons are black and golden in color and another set of the same icons are golden and white in color.
As per the website requirements, I have to use these two sets of icons simultaneously because I have dark images in the header, footer and in the content section of some pages and those golden and black color of icons are difficult to observe. For this reason, I want to use the other set of icons i.e. white and golden color so users can easily observe them on those dark images.
I can code in JavaScript to calculate sections having dark images. I can then switch between icons i.e. to use white & golden color icons instead of black & golden icons. However, this is not the required approach because I have approximately 8 pages on my website with the same header and footer but every page has different content and those dark images appear on different positions on each page.
Until now, I have used the following code and this is helping me in calculating the height of sections.
$(window).scroll(function() {
var element1height = $( "#element1" ).height();
var element2height = $( "#element2" ).height();
var total = element1height + element2height;
var st = $(this).scrollTop();
if( st > element1height ) {
$("nav").addClass("active");
}
else {
$("nav").removeClass("active");
}
if( st > total ) {
$("nav").removeClass("active");
}
});
I need some help in CSS Class detection with JavaScript so I can switch between icons sets and use the white & golden icons when the required CSS class is detected, i.e. when the CSS class of the block where I have used the image is detected. Once I will detect that class, I will then be able to code in JavaScript to use the white & golden color set of my icons only on those images.
Any help will highly be appreciated.

So this is mostly theory but here's how I would attack it...
Label all the dark areas say class black, then loop through each black class
$( ".black" ).each(function( index ) {
console.log("found dark area");
});
and find it's distance from the top
var start = $(this).offset().top
and it's height. The gives you it's start and end
var end = start + $(this).height();
Then find your icons start position and height. Then just check.
if(iconStart > start && iconEnd < end) {
//My icon exists in a dark section change to light and break from .each loop
else {
//Change to dark
}

What's up with classList.add?

On a project I'm working on, the homepage features its own unique hero image, while the remaining sub-pages will feature a generic image.
I'm trying to add and remove classes (that will fix the position of a nav bar and include padding on the hero) based on the current scroll position.
I can seem to get it going on the homepage, but not on the sub pages. Here's the code:
<script>
// When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunction()};
// Get the navbar
var navbar = document.getElementById("navbar_cont");
var media = document.getElementById("media");
var innerMedia = document.getElementById('media_inner');
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky");
media.classList.add("stickyPad");
innerMedia.classList.add("stickyPad");
} else {
navbar.classList.remove("sticky");
media.classList.remove("stickyPad");
innerMedia.classList.remove("stickyPad");
}
}
</script>
I can get classes added and removed for navbar and media, but not for innerMedia. If I swap the order of media and innerMedia however, I can now get it to work with innerMedia but not media.
Any clues would be appreciated!
Jason

Animating an element differently to slide in/out of view on scroll up / down

I'm working on a new portfolio for myself, using Bootstrap framework and I want to animate my slider based on the direction that the user is scrolling.
For example I already have an animation to slide the navbar class in. But as the user scrolls down the page I want to hide the navbar this is to give the user more visibility on the screen when browsing content. Then when they attempt to scroll back up the page I want to slide the .navbar class back in again.
Now I can easily get this to work if I target a specific element or pixel height, but that doesn't help me. I know it's achievable as I've seen it on several websites (LinkedIn for example).
So I'm wondering if it's a case of targeting positive or negative values on the y axis or something?

var lastScrollPosition = 0;
window.onscroll = function() {
var newScrollPosition = window.scrollY;
if (newScrollPosition < lastScrollPosition){
//upward - code here
}else{
//downward - code here
}
lastScrollPosition = newScrollPosition;
}

Hide only one element in fixed div when scrolling down

I have this big photo which takes 100%x100% of screen size and above it there is fixed slider.
I want to fadeout (hide) this green logo when you scroll down from this big header photo leaving navigation bar without it.
How can I do that?
http://i.stack.imgur.com/BiUfE.jpg here is photo

If you want the logo to scroll with the page, just put it outside of the menu bar in your HTML and use position absolute (JS Fiddle).
If you want it to fade out once it leaves the slider, you can use jQuery, here is an example:
//Some variables, to avoid calculating these values at every scroll
var logo = $('#logo');
var sliderBottom = $('#slider').offset().top + $('#slider').height() - logo.height();
//On every scroll
$(window).scroll(function(){
// if we're past the slider and the logo is still visible
if($(window).scrollTop()>sliderBottom && logo.is(':visible')){
logo.stop().fadeOut(300);
}
// if not
else if($(window).scrollTop()<sliderBottom && logo.is(':hidden')){
logo.stop().fadeIn(300);
}
});
JS Fiddle Demo

Make a div appear when scrolling past a certain point of a page

My goal is to make a fixed div appear at the top of a page once someone scrolls a certain amount of pixels down the page. Basically once the header section is out of view, this div will appear.
I've looked at code similar to what I want; however, haven't seen anything that would allow me to easily modify the pixel count from the top of the page (if possible).
Here is a piece of code I saw dealing with making divs appear by scrolling.
// Get the headers position from the top of the page, plus its own height
var startY = $('header').position().top + $('header').outerHeight();
$(window).scroll(function(){
checkY();
});
function checkY(){
if( $(window).scrollTop() > startY ){
$('.fixedDiv').slideDown();
}else{
$('.fixedDiv').slideUp();
}
}
// Do this on load just in case the user starts half way down the page
checkY();
I just want to know how to make it appear. If someone knows of a piece of code already in tact with a slide up and slide down animation, that would be greatly appreciated as well but not required.

window.addEventListener("scroll",function() {
if(window.scrollY > 500) {
$('.fixedDiv').slideDown();
}
else {
$('.fixedDiv').slideUp();
}
},false);

Brandon Tilley answered my question in a comment...
You would change the first line, with the startY, to be the specific Y
position you need, rather than calculating based on the header's
position and height. Here's an updated fiddle:
jsfiddle.net/BinaryMuse/Ehney/1

window.addEventListener("scroll",function() {
$('.fixedDiv')[(window.scrollY > 500)?"slideDown":"slideUp"]();
},false);
DEMO: http://jsfiddle.net/DerekL/8eG2A/