position:fixed like RELATIVE on scroll

index.html

<div class="wrapper">
			<ul class="nav">
				  <li>					<a href="">menu</a>				</li>
  <li><a href="">menu</a></li>
    <li>					<a href="">menu</a>				</li>
    <li>					<a href="">menu</a>				</li>
    <li>					<a href="">menu</a>				</li>
			</ul>
			<div class="header">
				<h2>header</h2>
			</div>
			<div class="main clearfix">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi commodi eaque quis possimus temporibus, doloribus minima totam libero perferendis voluptas exercitationem eos similique quae architecto unde quo dolore. Dolorum, cumque.
			</div>
		</div>
		<div class="footer">
			footer
		</div>

position:fixed like RELATIVE on scroll.markdown

position:fixed like RELATIVE on scroll ('-' * 38) Чтобы горизонтальное фиксированое меню, при сужении окна браузера не обрезало справа.

A Pen by Veremey on CodePen.

License.

script.js

$(document).scroll(function(){
		var scr = 0 - $(this).scrollLeft();
		$('.nav').css("left", scr);
	});

style.css

/* CSS reset and initialization*/

*{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

@font-face {
    font-family: Open_Sans_Light;
    src: url(../fonts/opensans-light.eot);
    src: local(Open_Sans_Light), url(../fonts/opensans-light.ttf);
}

/* Base elements */

a{
	text-decoration: none;
}

html, body{
	height: 100%;
	min-width: 760px;					/* Site width */
	width: auto !important; 
	width: 760px;						
}

body {
	color: #000;
	font-family: Open_Sans_Light, Tahoma, Sans Serif;
	height: 100%;
	line-height: 1;
	background-color: #313b62;
}

ul {
	list-style: none;
}

/* Wrapper */

.wrapper {
	background-color: #ccc;
	height: 100%;
	height: auto;
	min-height: 100%;
}

/* Nav */

.nav{
	height: 60px;						/* Nav height */
	left: 0;
	line-height: 60px;					/* Nav height */
	position: fixed;
	min-width: 1160px;
    width: 100%;
  background-color: #369;
}

.nav a{
	color: #e6e9f3;
	display: block;
	left: 0;
	right: 0;
	position: relative;
}

.nav  li {
	color: #e6e9f3;
	cursor: pointer;
	display: block;
	float: left;
	position: relative;
	text-align: center;
	width: 20%;
	white-space: nowrap;
}

.nav li.active,
.nav ul.focus li,
.nav li:hover {
	color: #fff;
	background-color: rgba(25,35,68,.95);
}

.nav li a:hover,
.nav li.active > a{
	color: #fff;
}

.nav ul {
	display: none;
	left: 0;
	position: absolute;
	right: -50%;
	top: 60px;
}

.nav ul li {
	float: none;
	text-align: left;
	width: auto;
}

.nav ul a{
	padding: 0 20px;
}

.nav ul li.active,
.nav ul li:hover { 
	background-color: #368cda; 
}

.nav ul.focus {
	display: block;
}
.nav span{
	color: #9cf;
}

/* Header */

.header{
	height: 100px;
	background-color: #313b62;
	padding-top: 60px;					/* Nav height */
}

/* Main */

.main {
	padding-bottom: 100px;				/* Footer height */
}

/* Footer */

.footer {
	background-color: #313b62;
	position: relative;
	margin-top: -100px;					/* Footer height */
	height: 100px;						/* Footer height */
	clear: both;
}

/* Clearfix tool */

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {
	display: inline-block;
}

* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}