CODEWITHSUNDEEP
javascriptjqueryscrolloffset
alexkodr
alexkodr

Reputation: 543

Adding offset().top amount on scroll

I have a fixed piece of text and I'm trying to add a different class each time the text enters a div on scroll. I've got it working no problem. But if I add an offset amount to the fixed text e.g.

top: 400px

I need to counter this offset in the JS. But I can't seem to figure it out. I've tried using:

.offset().top 400);

But it's not working. Here's a code i'm currently using:

HTML

<p class="text">TEXT HERE</p>

<div class="section1"></div>
<div class="section2"></div>
<div class="section3"></div>
<div class="section4"></div>

JS

$(window).scroll(function (event) {
   var scroll = $(window).scrollTop();
   $('.text').toggleClass('blue',
      scroll >= $('.section1').offset().top
   );
   $('.text').toggleClass('magenta',
     scroll >= $('.section2').offset().top
   );
   $('.text').toggleClass('green',
     scroll >= $('.section3').offset().top
   );
   $('.text').toggleClass('orange',
     scroll >= $('.section4').offset().top
   );
});
//trigger the scroll
$(window).scroll();//ensure if you're in current position when page is refreshed

The text needs to add class as soon as it enters the relevant div.

Here's a working fiddle: http://jsfiddle.net/6PrQW/334/

Upvotes: 0

Views: 1312

Answers (2)

JonahAaron
JonahAaron

Reputation: 408

So you did most everything right, but I think where you went wrong is here: var scroll = $(window).scrollTop();

You don't want to calculate using the window offset, rather you want to use the offset of your sticky text. So instead use: var scroll = $('.text').offset().top;

Let me know if that helps.

edit, and here is your fiddle with the edits. Note that I edited your line for setting the blue class since you don't want to match the sticky offset against itself.

Upvotes: 1

will
will

Reputation: 2007

To find out when something is within your window, you've gotta use something like...

if($(elem).offset().top - $(window).scrollTop < $(window).height()){
  //stuff
}

That should trigger as soon as elem is visible on the page! You can check it against $(window).height()/2, for example, if you want it to trigger in the center of the page instead. Hope this helps!

Upvotes: 0

Related Questions