0

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

NiphitAe
  • 295
  • 1
  • 5
  • 16
  • Please share the relevant code in your question. Linking to a page that may change or cease to exist will not help people reading this question in the future. – Michael Dunlap Jul 01 '14 at 20:19

3 Answers3

1

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' : '';
}
Community
  • 1
  • 1
Michael Dunlap
  • 4,300
  • 25
  • 36
0

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'); }
jorblume
  • 607
  • 6
  • 19
  • that is not working form me, I paste all the latin I could nothing change.... And the console doesn't tell anything :s – NiphitAe Jul 01 '14 at 19:14
  • The scroll event will fire if you increase the copy, I was able to get it working. But I'm not sure what you're trying to accomplish with this javascript. Try to get the scroll event to console log out a string first, then work on the functionality. – jorblume Jul 01 '14 at 19:19
  • I don't understand what you're writting... I want the background of my menu to change to white when I scroll so it can be readable above the rest of the page. – NiphitAe Jul 01 '14 at 19:30
  • Yes, but to do that you need to confirm that you're firing a scroll event in the first place. Start with the basics, make sure the event is firing. Copy that code I gave you in with way more content to trigger a scroll bar and see if you're getting any console errors. – jorblume Jul 01 '14 at 19:36
  • Ok, I did it and firebug indicates me that indeed it fas fired but no sign of any animation though. I update the link if you want to check by yourself: http://www.lacouleurdurendezvous.fr/test – NiphitAe Jul 01 '14 at 19:41
0
change `window.scrollTop` to `window.scrollY`
sol
  • 174
  • 1
  • 9