CODEWITHSUNDEEP
javascripthtmlcss
KolaCaine
KolaCaine

Reputation: 2187

Display some element user scrolling

I would like to display some element (div for example) when the user scrolling. I seeing that a scrollTop, but isn't work. Because for sure I use badly. I can't find some help without JQuery. I don't want to use JQuery.

I try this : 

var scroll = document.body.scrollTop;
var divLis = document.querySelectorAll("div");

for(let i = 0; i < divLis.length; i++) {
    if(scroll === divLis[i]) {
        divLis[i].style.transform = "translateX(0)";
        divLis[i].style.transition = "2s";
    }
}

Upvotes: 0

Views: 61

Answers (3)

KolaCaine
KolaCaine

Reputation: 2187

Ok... I understand.

I wanted to try this : 

 * {
        margin: 0;
        padding: 0;
        border: 0;
    }
    body {
        height: 200vh;
    }
    .left {
        width: 300px;
        height: 300px;
        background-color: red;
        position: absolute;
        top: 150%;
        transform: translateX(-300px);
        transition: 5s;
    }
    // HTML : 

    <div class="left"></div>

   // JS 

       var divLis = document.querySelector(".left");

window.addEventListener("scroll", function (e) {

    if(window.pageYOffset > 500) {
        console.log(window.pageYOffset)
        divLis.style.transform = "translateX(0)";
    }

})

So, it's very simple and I took my head for nothing.

So thanks so much for answering me !

Enjoy your Weekend

Upvotes: 0

thesublimeobject
thesublimeobject

Reputation: 1403

I honestly can't really tell what you're trying to do, but given your response to @uom-pgregorio's answer, I'm guessing you might just want a pure JS scroll listener:

window.addEventListener('scroll', function() {});

Upvotes: 1

dokgu
dokgu

Reputation: 6040

Edit: Sorry I just noticed that you didn't want jQuery but I'll just leave this here in case you change your mind.

$(window).scroll(function() {
    // show the div(s)
});

That's an event handler where the function runs or fires up whenever the window or viewport scrolls.

Upvotes: 0

Related Questions