Fixed title issue - no horizontal scrolling
I need the title to be displayed during the user's scroll page. I set the title to a fixed position and it stays while scrolling, but when I resize the browser, I don't get the horizontal scrollbar, so I can't see all the navigation items.
<body>
<header>
<div id="topHeader">
<p>test</p>
</div>
<nav>
... navigation items ...
</nav>
</header>
<div id="content">
@RenderBody()
</div>
</body>
CSS
#content{margin-top:80px;}
#topHeader{width: 100%; background: #262626; height: 40px;margin:0;}
header
{
width: 100%;
position: fixed;
top: 0;
}
source to share
You cannot do this in html / css. Go to this site and pull the browser window down, the footer is fixed position and you will lose the content on the right, but if you use the horizontal scrollbar it moves. I did it using jquery. Here is the code I used. Basically I move what is inside the fixed div in relation to the scrolling location of the windows.
if ($(window).width() < 990) {
$('#copyright').css({ 'left': (20 - $(window).scrollLeft()) + 'px' });
$('#click-to-call, #erving').css({ 'right': (20 + $(window).scrollLeft()) + 'px'});
}
$(window).scroll(function() {
if ($(window).width() < 990) {
$('#copyright').css({ 'left': (20 - $(window).scrollLeft()) + 'px' });
$('#click-to-call, #erving').css({ 'right': (20 + $(window).scrollLeft()) + 'px'});
}
else {
$('#copyright').css({ 'left': '20px' });
$('#click-to-call, #erving').css({ 'right': '20px' });
}
});
});
source to share
This worked for me to get facebook header behavior
<div id="headercontainer" style="position: fixed; width: 100%">
<div id="actualheader" style="position: relative; width: 1000px; margin: 0 auto">
</div>
</div>
with the following jquery:
<SCRIPT>
$(window).scroll(function() {
$('#actualheader').css('left', -$(this).scrollLeft() + "px");
});
</SCRIPT>
Not tested for compatibility
source to share
You are setting the width to 100%, which means 100% of the viewport in this case. The element will not expand past this point, which means there is no horizontal scroll bar.
You really shouldn't be capturing anything in the viewport that doesn't fit into it. Consider adding some kind of arrows to pan the navigation when it gets too big.
source to share
Not perfect, but it worked for me. I wrote this java function positionContentBelowHeader to increase the border of the table of contents so that it appears directly below the fixed header.
Set the fixed title to a minimum width and it will shrink very much when the window is shrunk. Then, the content function is called position in the body resize event. This way, at least nothing is cropped and the content slides down to set up a taller, condensed fixed header.
In asp.net code, I also have to add this to trigger the position function on the render page
'Save dynamic employee panel height into property using javascript.
Page.ClientScript.RegisterStartupScript(Me.GetType(), "positionContentBelowHeader", "positionContentBelowHeader();", True)
I put it in the body
<P →id = "objMasterPageBody" onresize = "positionContentBelowHeader ()";
<script type="text/javascript">
function positionContentBelowHeader()
{
//Set header height
var headerHeight = document.getElementById('<%= TableHeader.ClientID %>').clientHeight;
document.getElementById('<%= hidHeaderHeight.ClientID %>').value = headerHeight; //margin: 0px auto 0px auto; height: 100%;
document.getElementById('<%= TableContent.ClientID %>').setAttribute("style", "height: 100%; margin-left: auto; margin-right: auto; margin-bottom: 0px; margin-top: " + headerHeight.toString() + "px");
}
</script>
source to share