2

I have had a good look around and I am having a real hard time here with some jQuery, I can only find solutions to add a class to a div when scrolling but only by a certain numeric pixel number.

Here is a jsfiddle of my problem http://jsfiddle.net/sqz75b9g/

Also copied in the jquery. Now this works great under the purpose that the user has scrolled 500 pixels down. But I would like the addClass to happen when the user reaches the .content div, not just a pixel height.

Any advice would be greatly appreciated. Thank you very much.

    $(function() {
    var header = $('header');
    var menu = $('#menu');
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();

        if (scroll >= 500) {
            header.addClass('dark');
            menu.addClass('dark');
        } else {
            header.removeClass('dark');
            menu.removeClass('dark');
        }
    });
})

3 Answers 3

8

You can use following code:

var hieghtThreshold = $(".content").offset().top;

fiddle link: http://jsfiddle.net/sqz75b9g/6/

$(function() {
var header = $('header');
var menu = $('#menu');
var hieghtThreshold = $(".content").offset().top;
var hieghtThreshold_end  = $(".content").offset().top +$(".content").height() ;
$(window).scroll(function() {
    var scroll = $(window).scrollTop();

    if (scroll >= hieghtThreshold && scroll <=  hieghtThreshold_end ) {
        header.addClass('dark');
        menu.addClass('dark');
    } else {
        header.removeClass('dark');
        menu.removeClass('dark');
    }
  });
})
1
  • This works great thank you, i'm assuming my 'else' code is wrong, how would it then work for it to removeClass after its passed the .content
    – HeyImArt
    Oct 5, 2015 at 10:23
0

You can use the offset() method to know where is your element:

var header = $('header');
var menu = $('#menu');
$(window).scroll(function() {
    var scroll = $('.element').offset().top; // look at this

    if (scroll >= 500) {
        header.addClass('dark');
        menu.addClass('dark');
    } else {
        header.removeClass('dark');
        menu.removeClass('dark');
    }
});
0

In this case you need to use .offset().top:

$(function() {
  var header = $('header');
  var menu = $('#menu');
  $(window).scroll(function() {
    var scroll = $(window).scrollTop();

    if (scroll >= $('.content').offset().top) { // check the offset top
      header.addClass('dark');
      menu.addClass('dark');
    } else if(scroll >= $('.content').offset().top+$('.content').height()){ // check the scrollHeight
      header.removeClass('dark');
      menu.removeClass('dark');
    }
  });
});

if (scroll >= $('.content').offset().top) { checks the specific element is in the view.

} else if(scroll >= $('.content').offset().top+$('.content').height()){ This will check if element is passed from the view.

3
  • This works great! Can't believe how simply that worked, one last thing which I guess in my code is wrong, is the else { once it is beyond .content, it doesnt removeClass.
    – HeyImArt
    Oct 5, 2015 at 10:19
  • thanks for your answer. complete it so i can give u +1
    – ncm
    Oct 5, 2015 at 10:19
  • @HeyImArt for this i guess you need to check for offset().top + height.
    – Jai
    Oct 5, 2015 at 10:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.