Website Design - Scrolling menu that fixes at the top and expands - html

Question

I have a menu that will be run through a javascript and cause the menu to scroll to the top, lock in place, then expand a few pixels.
A live example would be something like this: http://www.kriesi.at/
Currently I have this:
http://jsfiddle.net/djtiii/7cauw/
HTML
<div class="space">
<p></p>
</div>
<div id="menu">
<div class="container">
<div class="pages">
<ul>
<li>Hi,</li>
<li>how</li>
<li>are</li>
<li>you?</li>
</ul>
</div>
<div class="icons">
<img src="http://thegraphicsfairy.com/wp-content/uploads/2014/01/Valentine-Fairy-Image-GraphicsFairy.jpg">
<img src="http://thegraphicsfairy.com/wp-content/uploads/2014/01/Valentine-Fairy-Image-GraphicsFairy.jpg">
</div>
</div>
</div>
CSS
body {
height: 600px;
min-width: 400px;
}
ul {
list-style-type: none;
padding: 0;
margin: 0 auto;
}
.container {
min-width: 380px;
max-width: 380px;
padding: 0;
margin: 0 auto;
}
.space {
height: 100px;
}
#menu {
min-width: 400px;
left: 0;
right: 0;
height: 60px;
border-top: 1px solid black;
border-bottom: 1px solid black;
position: absolute;
margin: 2px 0 0 0;
}
.pages {
height: 60px;
float: left;
border-right: 1px solid black;
border-left: 1px solid black;
}
.icons {
height: 60px;
min-width: 100px;
float: right;
border-left: 1px solid black;
border-right: 1px solid black;
}
.pages li {
line-height: 60px;
display: inline-block;
margin: 0 5px 0 0;
}
.icons img {
float: right;
height: 100%;
width: auto;
}
#menu.fixed {
position: fixed;
top: 0;
z-index: 999;
margin: 0 auto;
}
JavaScript
$(document).ready(function () {
var showStaticMenuBar = false;
$(window).scroll(function () {
if (showStaticMenuBar == false) {
if ($(window).scrollTop() >= 110) {
$('#menu').addClass('fixed');
showStaticMenuBar = true;
}
} else {
if ($(window).scrollTop() < 110) {
$('#menu').removeClass('fixed');
showStaticMenuBar = false;
}
}
});
})
The scroll effect "works", but is slightly broken since the content is fixed width. If the resolution is less than that width, then when the menu fixes to the top it cuts off information to the right. Are there any work around to force a position:fixed into a relative space?
Any stabs at this will be greatly appreciated. Thanks!

Answer 1

Not sure exactly what you are after here, but it looks like you need to look further into responsive web design.
A few css tricks here that may (or may not) help....
If instead of using a min-width and max-width, you set a width and a max-width of 100%, ie
.container {
width:380px;
max-width: 100%;
}
then the width will be 380px, but will then become 100% when the window is less than 380 pixels wide. At the moment, your container is always 380px (no point setting a min-width and max-width if they have the same value, just use width). This is why when the window resolution is smaller than 380px, it cuts off to the right.
To specify styles to use only when the window is below 380px (or any other resolution), you can use the code similar to the following.
#media screen and (max-width:380px) {
.container {
/* NEW STYLES HERE */
}
}
This means that you do not need to write a single style that works for all resolutions - you can tweak it for different resolutions. These are called breakpoints.
If you are using background images, you can scale these using the background-size css property, which allows them to be resized on different resolutions.

Answer 2

Change #menu.fixed to this left:0;right:0;top:0;z-index: 999;margin:auto;position:fixed;