CODEWITHSUNDEEP
javascripthtmlcsswordpressscroll
teccraft
teccraft

Reputation: 75

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.

Upvotes: 0

Views: 210

Answers (1)

MomasVII
MomasVII

Reputation: 5081

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 }

Upvotes: 1

Related Questions