I've been trying to figure out the correct way to do this. Three divs, Advert Div on top, Header Div beneath, and Content Div furthest down. On pg load I intend to have the advert div show, but upon scrolling I intend to keep the header div on position fixed, top:0px i.e. at the top of the page over the content.
Am aware of using position fixed in CSS, yet they way I need it contradicts this attribute since I need the header div to move further up till page top on scroll and stay position fixed there.
Am also aware of the possibility in having all three divs on top of each other, and upon scroll, using jquery I'll hide the advert div and naturally the header div would move up to the top and maintain its position fixed attribute.
any suggestions? JS Fiddle link here for a quick example
Here is the code
$(document).ready(function () {
var top_fixed;
if ($('#header-con').length > 0)
{
top_fixed = $('#header-con').offset().top;
}
$(window).scroll(function () {
if ($('#header-con').length > 0)
{
$('#header-con').toggleClass('fixed', $(window).scrollTop() > top_fixed);
}
});
});
More Clear CSS
*{
margin:0;
padding:0;
}
#advert-con { color:yellow;height:130px;background:blue;width:100%;margin:0px;padding:0px;display:block; }
#header-con { height:170px;background:black;color:#fff!important;margin:0px;padding:0px; }
#content-con { height:700px;background:purple; }
.fixed {
position: fixed;
top: 0;
width:100%;
}
Making the #advert-con fixed
.container{
margin-top:130px;
display:inline-block;
width:100%;
}
.container:after{
display:block;
clear:both;
content:"";
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments