CODEWITHSUNDEEP
javascriptjquery
LL1997
LL1997

Reputation: 89

Javascript/jQuery - adding value to integer changes other variable

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).

Upvotes: 3

Views: 130

Answers (1)

Remco van Dalen
Remco van Dalen

Reputation: 304

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...

Upvotes: 2

Related Questions