CODEWITHSUNDEEP
javascripthtmlcssmouseeventonscroll
NiphitAe
NiphitAe

Reputation: 405

Onscroll event not working

This time I have a problem with an animation. I would like my background's header/menu to become White when users scroll down.

The header/menu is fixed and I use the z-index property to maintain it above the rest of the page.

I have made a html test page with some JS and CSS code:

You can see the test online here: http://www.lacouleurdurendezvous.fr/test

Sorry but I tried to put the code here but the editor is a bit capricious

Upvotes: 0

Views: 6306

Answers (3)

Michael Dunlap
Michael Dunlap

Reputation: 4310

You are not using the correct code for getting the scroll position. To reference an answer for a very similar question: JavaScript get window X/Y position for scroll

var doc = document.documentElement;
var top = (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0);

This would result in an onscroll event handler like so:

window.onscroll=function() {
    var doc = document.documentElement;
    var top = (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0);
    document.getElementById('text').className=top>50 ? 'scroll' : '';
}

Upvotes: 1

sol
sol

Reputation: 174

change `window.scrollTop` to `window.scrollY`

Upvotes: 0

jorblume
jorblume

Reputation: 607

The issue isn't the javascript, the problem is there is not enough text in the html to trigger the scroll bar. No scroll bar, no scrolling, and thus the listener is never going to fire.

When I duplicated your html text a few times, this event was able to fire:

     function () { console.log('working'); }

Upvotes: 0

Related Questions