I have a header element with a semi-transparent background that I would like to change to a solid color when the user scrolls by a specific point on a page.
Any recommendations?
I have a header element with a semi-transparent background that I would like to change to a solid color when the user scrolls by a specific point on a page.
Any recommendations?
The code I try:
<!DOCTYPE html>
<html>
<head>
<style>
body {
width: 5000px;
}
</style>
</head>
<body onscroll="scrollWin()">
<p id="ad" style="background-color:pink; " >p element background change, when scrollbar scroll.</p>
<script>
//http://www.sitepoint.com/community/t/background-change-color-when-scrolling/200302
//http://www.w3schools.com/jsref/met_win_scrollto.asp
//http://www.w3schools.com/jsref/met_win_scrollby.asp
//http://www.w3schools.com/jsref/obj_window.asp
//http://www.w3schools.com/jsref/prop_win_pagexoffset.asp
//http://www.w3schools.com/jsref/dom_obj_event.asp
//http://www.w3schools.com/jsref/event_onscroll.asp
function scrollWin() {
//window.scrollTo(500, 0);
//alert('window.pageXOffset= '+window.pageXOffset + '\nwindow.pageYOffset='+ window.pageYOffset);
var el= document.getElementById('ad');
if(window.pageXOffset >= 500){
el.style.backgroundColor='turquoise';
}
if(window.pageXOffset < 500){
el.style.backgroundColor='pink';
}
}
</script>
</body>
</html>
I wound up using something like this:
jQuery(window).scroll(function() {
var scroll = jQuery(window).scrollTop();
if (scroll >= 150) {
jQuery("header").addClass("black");
} else {
jQuery("header").removeClass("black");
}
});
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.