Hidden content under header with Jquery?

toplisek · 03-10-2013, 05:33 PM

I have set working code. How to show area when scrolled like:
Submenu items under should be under header

PHP Code:


			

<!DOCTYPE HTML>

<html>

<head>
  <title></title>
<script type="text/javascript" src="jquery.js"></script>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
$(window).scroll(function() {
    var s = $(window).scrollTop();
    $('header').scrollTop(s);
});
/*]]>*/
</script>
<style type="text/css">
/*<![CDATA[*/
header, nav, div {
display: block;
}
header {
left: 0;
top: 0;
position: fixed;
z-index: 1000;
}
header {
position:fixed;
overflow:hidden;
background: url("../images/bg/background_header1.png") repeat-x scroll left 10px #A80000;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
opacity: 0.95;
height: 120px;
width: 100%;
border-bottom: 1px solid #800000;
z-index: 1000;
}
#content {
width:500px;
height:10000px;
background:rgba(0,0,0,0.5);
margin:100px auto 0;
}
#mysubmenu {
position: relative;
padding-top: 110px;
}
.wrapper {
position: relative;
width: 990px;
margin: 0 auto;
}
.contentpromotion {
background: none repeat scroll 0 0 #800080;
height: auto;
}
#submenuitems {
display: block;
position: relative;
border: 2px solid #008000;
}
/*]]>*/
</style>
</head>

<body>
<header></header>
<div id="mysubmenu">
<div class="submenuitems_content1">
<div class="wrapper">
<nav id="submenuitems">
<br /><br /><br />
</nav>
</div>
</div>

<div class="wrapper contentpromotion">
<h3 class="">My content promotion</h3>
</div>
</div>

<div class="submenuitems_content1">
<div class="wrapper">
<nav id="submenuitems">
<ul><li>Submenu items under should be under header</li></ul>
</nav>
</div>
</div>

<div id="content">
    <div class="item">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porta massa nec ligula consectetur in vestibulum nulla ultrices. Suspendisse at orci velit. Nullam tempor porttitor dapibus. Donec magna nibh, suscipit vitae aliquam non, bibendum quis lorem. Quisque dolor lacus, blandit sit amet euismod a
    </div>
    <div class="item">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porta massa nec ligula consectetur in vestibulum nulla ultrices. Suspendisse at orci velit. Nullam tempor porttitor dapibus. Donec magna nibh, suscipit vitae aliquam non, bibendum quis lorem. Quisque dolor lacus, blandit sit amet euismod a
    </div>
    <div class="item">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porta massa nec ligula consectetur in vestibulum nulla ultrices. Suspendisse at orci velit. Nullam tempor porttitor dapibus. Donec magna nibh, suscipit vitae aliquam non, bibendum quis lorem. Quisque dolor lacus, blandit sit amet euismod a
    </div>
    <div class="item">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porta massa nec ligula consectetur in vestibulum nulla ultrices. Suspendisse at orci velit. Nullam tempor porttitor dapibus. Donec magna nibh, suscipit vitae aliquam non, bibendum quis lorem. Quisque dolor lacus, blandit sit amet euismod a
    </div>
    <div class="item">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porta massa nec ligula consectetur in vestibulum nulla ultrices. Suspendisse at orci velit. Nullam tempor porttitor dapibus. Donec magna nibh, suscipit vitae aliquam non, bibendum quis lorem. Quisque dolor lacus, blandit sit amet euismod a
    </div>
    <div class="item">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porta massa nec ligula consectetur in vestibulum nulla ultrices. Suspendisse at orci velit. Nullam tempor porttitor dapibus. Donec magna nibh, suscipit vitae aliquam non, bibendum quis lorem. Quisque dolor lacus, blandit sit amet euismod a
    </div>
    <div class="item">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porta massa nec ligula consectetur in vestibulum nulla ultrices. Suspendisse at orci velit. Nullam tempor porttitor dapibus. Donec magna nibh, suscipit vitae aliquam non, bibendum quis lorem. Quisque dolor lacus, blandit sit amet euismod a
    </div>
    <div class="item">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porta massa nec ligula consectetur in vestibulum nulla ultrices. Suspendisse at orci velit. Nullam tempor porttitor dapibus. Donec magna nibh, suscipit vitae aliquam non, bibendum quis lorem. Quisque dolor lacus, blandit sit amet euismod a
    </div>
    <div class="item">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porta massa nec ligula consectetur in vestibulum nulla ultrices. Suspendisse at orci velit. Nullam tempor porttitor dapibus. Donec magna nibh, suscipit vitae aliquam non, bibendum quis lorem. Quisque dolor lacus, blandit sit amet euismod a
    </div>
    <div class="item">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porta massa nec ligula consectetur in vestibulum nulla ultrices. Suspendisse at orci velit. Nullam tempor porttitor dapibus. Donec magna nibh, suscipit vitae aliquam non, bibendum quis lorem. Quisque dolor lacus, blandit sit amet euismod a
    </div>
    <div class="item">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porta massa nec ligula consectetur in vestibulum nulla ultrices. Suspendisse at orci velit. Nullam tempor porttitor dapibus. Donec magna nibh, suscipit vitae aliquam non, bibendum quis lorem. Quisque dolor lacus, blandit sit amet euismod a
    </div>
    <div class="item">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porta massa nec ligula consectetur in vestibulum nulla ultrices. Suspendisse at orci velit. Nullam tempor porttitor dapibus. Donec magna nibh, suscipit vitae aliquam non, bibendum quis lorem. Quisque dolor lacus, blandit sit amet euismod a
    </div>
    <div class="item">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porta massa nec ligula consectetur in vestibulum nulla ultrices. Suspendisse at orci velit. Nullam tempor porttitor dapibus. Donec magna nibh, suscipit vitae aliquam non, bibendum quis lorem. Quisque dolor lacus, blandit sit amet euismod a
    </div>
    <div class="item">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porta massa nec ligula consectetur in vestibulum nulla ultrices. Suspendisse at orci velit. Nullam tempor porttitor dapibus. Donec magna nibh, suscipit vitae aliquam non, bibendum quis lorem. Quisque dolor lacus, blandit sit amet euismod a
    </div>
    <div class="item">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porta massa nec ligula consectetur in vestibulum nulla ultrices. Suspendisse at orci velit. Nullam tempor porttitor dapibus. Donec magna nibh, suscipit vitae aliquam non, bibendum quis lorem. Quisque dolor lacus, blandit sit amet euismod a
    </div>
    <div class="item">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porta massa nec ligula consectetur in vestibulum nulla ultrices. Suspendisse at orci velit. Nullam tempor porttitor dapibus. Donec magna nibh, suscipit vitae aliquam non, bibendum quis lorem. Quisque dolor lacus, blandit sit amet euismod a
    </div>
    <div class="item">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porta massa nec ligula consectetur in vestibulum nulla ultrices. Suspendisse at orci velit. Nullam tempor porttitor dapibus. Donec magna nibh, suscipit vitae aliquam non, bibendum quis lorem. Quisque dolor lacus, blandit sit amet euismod a
    </div>
    <div class="item">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porta massa nec ligula consectetur in vestibulum nulla ultrices. Suspendisse at orci velit. Nullam tempor porttitor dapibus. Donec magna nibh, suscipit vitae aliquam non, bibendum quis lorem. Quisque dolor lacus, blandit sit amet euismod a
    </div>
    <div class="item">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porta massa nec ligula consectetur in vestibulum nulla ultrices. Suspendisse at orci velit. Nullam tempor porttitor dapibus. Donec magna nibh, suscipit vitae aliquam non, bibendum quis lorem. Quisque dolor lacus, blandit sit amet euismod a
    </div>
    <div class="item">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porta massa nec ligula consectetur in vestibulum nulla ultrices. Suspendisse at orci velit. Nullam tempor porttitor dapibus. Donec magna nibh, suscipit vitae aliquam non, bibendum quis lorem. Quisque dolor lacus, blandit sit amet euismod a
    </div>
    <div class="item">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porta massa nec ligula consectetur in vestibulum nulla ultrices. Suspendisse at orci velit. Nullam tempor porttitor dapibus. Donec magna nibh, suscipit vitae aliquam non, bibendum quis lorem. Quisque dolor lacus, blandit sit amet euismod a
    </div>

</div>


<div id="footer">Footer</div>

</body>

</html>