How add / remove class based on div position / scrolltop.

Question

I've done a lot of research to try find a solution for this problem. I have a project where I am using parallax (magicScroll). I have a hamburger icon (where show/hide the menu), however this icon is black and I need change the color based on image background. So if I have a dark image as background the hamburger icon should be white and if I have a white background the icon should be black.

I've tried a lot of ways to do that, however I am using parallax. So I am having problems to write the function and I need help. My menu icon (.hamburger) is fixed at the header (position:fixed) and I have the sections below. The problem is: How identify the section in viewport (visible) and how add/remove the classe in my menu icon (.hamburger).

I was trying something like that:

 var setMenu = function() {
  if($('#section-3').inViewport()) {
    $('.hamburger').addClass('navwhite')
  } else {
    $('.hamburger').removeClass('navwhite')
  };
};

I was trying something like that to test, but without luck. :( Once my #section-3 hits the top of viewport, because the parallax, my ID never leaves this position, so I need help to learn how to do that.

Thanks in advance!

Your `inViewport()` function is wrong for your case, it needs adjustments. Check some jQuery libraries as [this one](https://github.com/zeusdeux/isInViewport). — skobaljic, Sep 05 '16 at 13:47

Rahul Patel · Answer 1 · 2016-09-05T13:46:19.480

0

will check if page has been scrolled up to or greater then section "section-3" then "navwhite" class will be added otherwise it will be removed.

$(window).scroll(function() {
    if ($(this).scrollTop() >= $('#section-3').offset().top) {
        $('.hamburger').addClass('navwhite')
    }
    if($(this).scrollTop() < $('#section-3').offset().top) {
        $('.hamburger').removeClass('navwhite')
    }
});

edited Sep 05 '16 at 13:46

answered Sep 05 '16 at 13:29

Rahul Patel

5,248
2
14
26

Hey Rahul, this works, however the 'else' is not working, because the parallax (I think) – George Sep 05 '16 at 13:35
Check my updated answer. I have removed else and used two if condition instead. – Rahul Patel Sep 05 '16 at 13:47
I just saw right now and after add your code, the same thing happened, else is not working :( – George Sep 05 '16 at 13:59

score 0 · Answer 2 · answered Sep 05 '16 at 13:31

0

The following code proves if an element has completely entered the viewport and sets or removes a class:

var section = $('.section');
var sectionTop = section.offset().top + section.height();

$(window).bind('scroll', function() {
    var windowTop = $(window).scrollTop() + $(window).height();

    if (windowTop > sectionTop) {
          $('.hamburger').addClass('navwhite')
    }
    else {
        $('.hamburger').removeClass('navwhite')
    }
});

answered Sep 05 '16 at 13:31

Michael Andorfer

1,660
5
25
45

This works in parts. Once the class is added, 'else' is not working because the parallax. – George Sep 05 '16 at 13:34

score 0 · Answer 3 · answered Sep 05 '16 at 13:43

0

Since your problem addresses background and foreground colors as far as I understood, you could also have a look at the following library: BackgroundCheck

answered Sep 05 '16 at 13:43

Michael Andorfer

1,660
5
25
45

score 0 · Answer 4 · edited May 23 '17 at 12:32

0

Please have a look at this answer: Determine distance from the top of a div to top of window with javascript.

Using Jaspers code, you are able to calculate the distance from a element to to top edge of the viewport.

Then you could compare the size of your background and it's current position on the screen:

// distance defined like in Jaspers answer linked above
if(distance <= 0 && distance >= (0-$('#section-3').outerHeight())){
$('.hamburger').addClass('navwhite');
}else{
$('.hamburger').removeClass('navwhite');
}

I have forked Jaspers JSFiddle to add a class red to the body element, as soon as the yellow square touches to upper document bound and removes the class, as soon as the yellow square stops touching the edge: http://jsfiddle.net/4psxe6uL/

edited May 23 '17 at 12:32

Community

1
1

answered Sep 05 '16 at 13:43

RicoBrassers

91
1
8

Hello Rico, this is nice, but you need keep in mind I am using parallax. – George Sep 05 '16 at 13:47
@George What parallax script do you use? I tried my solution with http://pixelcog.github.io/parallax.js/ and it worked like a charm. – RicoBrassers Sep 05 '16 at 14:03
I am using MagicScroll – George Sep 05 '16 at 14:07
@George Working for me too. Please note, that i changed `.height()` to `.outerHeight()` to include padding. (I edited that in my code above as well). – RicoBrassers Sep 05 '16 at 14:14
I've tried again and no success :( the function works fine but the 'else' is not working. – George Sep 05 '16 at 15:39
@George Weird. Do you only use jQuery and ScrollMagic? What Browser do you use? – RicoBrassers Sep 06 '16 at 06:22

score 0 · Answer 5 · answered Sep 05 '16 at 13:51

This is in pure js. It triggers on scroll and changes the class as necessary.
Assumes body is your container element.

document.body.addEventListener('scroll',function(){
 if (document.body.scrollTop<document.querySelector('#section-3').style.height) {
   document.querySelector('.hamburger').setAttribute('class','navwhite');
 } else if (document.body.scrollTop>=document.querySelector('#section-3').style.height) {
  document.querySelector('.hamburger').removeAttribute('class');
 }
});

score -1 · Answer 6 · answered Dec 06 '18 at 07:24

-1

its simple

jQuery( "classname/id of the div" ).eq(position of the div).addClass(new class name);

answered Dec 06 '18 at 07:24

Sooraj Thekkepatt

79
9

The question is about the div's position (=location) on the screen, not its index relative to the parent. – JJJ Dec 06 '18 at 07:47

How add / remove class based on div position / scrolltop.

6 Answers6