I have encountered a peculiar issue while attempting to fix a div containing other nested divs.
My goal is to have the .menu div remain visible and fixed at the top of the page while scrolling, hiding the .slideshow_head div. However, despite fixing the .header div, the .menu div remains fixed in its original position.
window.onscroll=function () {
var top = window.pageXOffset ? window.pageXOffset : document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
if(top > 50){document.getElementById("menu").style.position = "fixed";
document.getElementById("menu").style.height="0px"
}
else {
document.getElementById("menu").style.position = "relative";
document.getElementById("menu").style.height="40px"
}
if(top > 50){document.getElementById("header").style.position = "fixed";
document.getElementById("header").style.height="140px"
}
else {
document.getElementById("header").style.position = "relative";
document.getElementById("header").style.height="390px"
}
if(top > 50){document.getElementById("slideshow_head").style.position = "fixed";
document.getElementById("slideshow_head").style.height="0px"
}
else {
document.getElementById("slideshow_head").style.position = "fixed";
document.getElementById("slideshow_head").style.height="390px"
}
}
For the code, visit http://jsfiddle.net/largan/P2B93/
Any suggestions or insights would be greatly appreciated!