JavaScript runs only the last call

Question

In the footer I call the function fxScrollTop with params see below

    bib('.header').fxScrollTop({
        pixels: 25,
        class: 'fixed',
    });
        
    bib('.content').fxScrollTop({
    pixels: 25,
    class: 'fixedHeader',
    });

Below the function

function bib(selector){
    let elementAll;
    if(typeof selector !== 'object'){
        elementAll = document.querySelectorAll(selector);
    }
    
    return{
        fxScrollTop: (props) => {
            for(const prop in props){
                if(prop == 'pixels'){
                    var pixels = props[prop];
                }
                if(prop == 'class'){
                    var newclass = props[prop];
                }               
            }
            for(let i=0; i < elementAll.length; i++){
                elm = elementAll[i];
            }
            
            window.onscroll = function (e) {  
                var pixelsFromTop = window.pageYOffset;
                if(pixelsFromTop > pixels){
                    elm.classList.add(newclass);
                }else{
                    elm.classList.remove(newclass);
                }
            }
        }
    }
}

The function works but only on the last call and not twice. How can I call this function multiple times with different params?

The two `for` loops in your `fxScrollTop()` function don't do anything at all, and it's not clear what you *expect* them to do. — Pointy, Sep 02 '23 at 12:33
everytime you call `bib()` this event `window.onscroll = .....` is overwritten, discarding what was set in the first call, and leaving only the last call. — GrafiCode, Sep 02 '23 at 12:33
You should not create a new account for every question. At least this question looks a lot like [this other question](https://stackoverflow.com/questions/77027457/return-boolean-from-function-undefined#comment135790041_77027457) of yours? — Teemu, Sep 02 '23 at 13:32

score 1 · Answer 1 · answered Sep 02 '23 at 13:01

for(const prop in props){
    if(prop == 'pixels'){
        var pixels = props[prop];
    }
    if(prop == 'class'){
        var newclass = props[prop];
    }               
}

has the same effect as simply var pixels = props.pixels (or just using props.pixels directly, if you are not worried about mutation).

for(let i=0; i < elementAll.length; i++){
    elm = elementAll[i];
}

has the same effect as elm = elementAll[elementAll.length - 1].

window.onscroll can only contain a single event handler. Use window.addEventListener('scroll', fn) to add multiple event handlers.

You likely want something similar to this (but consider debouncing scroll events):

const fxScrollTop = (selector, props) => {
    const selection = document.querySelectorAll(selector);
    const element = selection[selection.length - 1];

    window.addEventListener('scroll', function (e) {
        if (this.pageYOffset > props.pixels)
            element.classList.add(props.class);
        else
            element.classList.remove(props.class);
    });
};

fxScrollTop('.header', {
    pixels: 25,
    class: 'fixed'
});

fxScrollTop('.content', {
    pixels: 25,
    class: 'fixedHeader'
});

JavaScript runs only the last call

1 Answers1