Javascript/jQuery - adding value to integer changes other variable

Question

I'm experiencing something weird with a piece of code I've written to enlarge a link as soon as the user scrolls past a div box. I'm using this code:

function resize_links() {
    $(".all_planes a").css({fontSize: "16px"})
    $( ".plane_container" ).each(function( ) {
        var offtop = $(this).offset().top;
        var scrolltop = $(window).scrollTop();

        var type = $(this).data("type");

        if(scrolltop > offtop) {
            if (window.console) console.log(scrolltop + " " + offtop + " " + type);

            $("." + type + "_link").css({
                fontSize: "20px"
            });
        }
    });
}
$( window ).scroll(function() {
    resize_links();
});

The above function works but the illogical things happen as soon as I add some pixels to the scrolltop variable (scrolltop = scrolltop + 98) to account for a fixed header I have on my website. By looking at the console I see that in this case, the values of scrolltop and offtop are identical. Without the 98, offtop is a constant value as it logically should be.
I tried to substract a value from scrolltop to find out if that makes a difference and surprisingly everything works as it should that way. I've also deactivated other JS code to check if there was something interfering but I couldn't find a solution this way either.
What is probably worth noting is that the .plane_container divs are loaded onto the site using the jQuery .html() method. Code:

$('document').ready(function(){
    var startupcont = $(".skyline_cont").html();
    $(".sky_go_switch").html(startupcont);   
});

So there are pretty weird things going somehow and if there are more things that you need to see to get an idea of the issue then I will of course add this to my question. Thanks in advance!

Edit:
Basically this is what I am trying to achieve: https://jsfiddle.net/xs5rov25/

Edit 2:
I'm somehow stuck here and nothing really seems to make sense. As soon as I add any value to scrolltop, the offtop value goes wild. But I may have found a hint: if I leave out the dynamic loading stuff and just post the contents directly into the .sky_go_switch div, my code works fine - even with the 98 added. Is there maybe a different way to manage the dynamic loading (The user can control which content is displayed - there are two options - see this fiddle: https://jsfiddle.net/1Lret7vk/4/)? Or is there a way to change my current resize_links code so that it works in my situation?

Edit 3:
Okay, so I was finally able to recreate the issue in my fiddle. I have merged the two fiddles I created and now you can see the problem.
Without the 98 - working version: https://jsfiddle.net/a5jxw2jd/
Adding the 98 - the crazy things start to happen: https://jsfiddle.net/72jkfxkw/
You can see that all links resize at once with the first scroll in the second fiddle. This is due to the fact that scrolltop is somehow identical to offtop then (see console).

Please keep in mind that + might try to concatenate. try scrolltop = +scrolltop + 98;. Can you please provide us a fiddle of the current code? — briosheje
– briosheje, Commented Apr 15, 2015 at 16:15
Adding a plus in front of scrolltop unfortunately didn't work. And I added the fiddle to the question. — LL1997
– LL1997, Commented Apr 15, 2015 at 19:15
Where do you add scrollTop = scrollTop + 98? Works fine when I tried it in your fiddle: jsfiddle.net/xs5rov25/1 — Mackan
– Mackan, Commented Apr 16, 2015 at 6:52
Just realized that, too! The problem probably has to do with something else. See my edit3. I could now recreate the exact issue. Thanks for taking the time. — LL1997
– LL1997, Commented Apr 16, 2015 at 12:42

Remco van Dalen · Accepted Answer · 2015-04-16 13:17:17Z

2

I can't really explain why (because I would imagine your fiddle without the + 98 should have the same problem), but I do know you can fix it by making your box selector only work for the visible boxes by changing the selector from just ".box" to ".switcher_content .box". I guess it has something to do with the fact that offset positions of invisible elements give weird results, and since you're updating all the #_link elements for each .box evaluated, the invisible ones overwrite the correct value of the visible box. But like I said, I have no explanation why the same isn't happening in the version without + 98...

answered Apr 16, 2015 at 13:17

Remco van Dalen

3041 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

skobaljic Over a year ago

This is a correct answer, use .box:visible as a selector, because hidden elements testing overwrites testing of visible boxes. You should also optimize your code, take a look here.

LL1997 Over a year ago

The answer works great - thanks! And also thanks for the optimization advice!

Collectives™ on Stack Overflow

Javascript/jQuery - adding value to integer changes other variable

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related