Having trouble with JavaScript's onscroll() function

I’m trying to create an online CV with a static box containing work experience. The idea is that when you scroll up or down the different companies and their associated information fades in and out. Here’s my JavaScript code so far:

var employment_history_display = "Microsoft";
document.getElementById("employment_history_text").onwheel = function () {
    if (event.deltaY < 0) {
        if (employment_history_display == "SoftwareAG") {
            $("#SoftwareAG").animate({ opacity: '0' });
            $("#Microsoft").animate({ opacity: '1' });
            employment_history_display = "Microsoft";
        } else if (employment_history_display == "NAS") {
            $("#NAS").animate({ opacity: '0' });
            $("#SoftwareAG").animate({ opacity: '1' });
            employment_history_display = "SoftwareAG";
        };
    } else if (event.deltaY > 0) {
        if (employment_history_display == "SoftwareAG") {
            $("#SoftwareAG").animate({ opacity: '0' });
            $("#NAS").animate({ opacity: '1' });
            employment_history_display = "NAS";
        } else if (employment_history_display == "Microsoft") {
            $("#Microsoft").animate({ opacity: '0' });
            $("#SoftwareAG").animate({ opacity: '1' });
            employment_history_display = "SoftwareAG";
        };
    };
};

When the page loads the “Microsoft” div is visible and the other two are transparent. It works in that on wheel the next div fades in and the last one fades out. However, it quickly scrolls through both without stopping in the middle. I believe its due to onwheel returning multiple values thus the function repeats multiple times. Is there anyway to make it so the function defined under onwheel only works once?

Not sure which product this question belongs to, Can you please add the product details?
-NP

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.