proba fixed nav222

by lovromar

HTML

<script src="http://bigspotteddog.github.com/ScrollToFixed/jquery-scrolltofixed-min.js"></script>
<body>
    
    <div class="banner"></div>
    <ul>
        <li class="topRow">
            <div class="headingLogo"><img src="http://icons-search.com/img/yellowicon/penguin_linux.zip/Linux-icons-Penguin_2_48x48.png-48x48.png"></div>            
            <div class="breadcrumbs">breadcrumb/trail</div>
            <h1>Topic Heading</h1>
        </li>
            
            
            
       
    </ul>
        
        <div class="menu"><p>1...21</p>
            <p>2......2.2.</p></div>
        
       <div class="center">
        <p>dasdasij daisodj sa doa s</p>
         <p>dasdasij daisodj sa doa s</p>
         <p>dasdasij daisodj sa doa s</p>
         <p>dasdasij daisodj sa doa s</p>
         <p>dasdasij daisodj sa doa s</p>
         <p>dasdasij daisodj sa doa s</p>
         <p>dasdasij daisodj sa doa s</p>
         <p>dasdasij daisodj sa doa s</p>
         <p>dasdasij daisodj sa doa s</p>
         <p>dasdasij daisodj sa doa s</p>
         <p>dasdasij daisodj sa doa s</p>
         <p>dasdasij daisodj sa doa s</p>
         <p>dasdasij daisodj sa doa s</p>
         <p>dasdasij daisodj sa doa s</p>
           <p>dasdasij daisodj sa doa s</p>
         <p>dasdasij daisodj sa doa s</p>
         <p>dasdasij daisodj sa doa s</p>
         <p>dasdasij daisodj sa doa s</p>
         <p>dasdasij daisodj sa doa s</p>
         <p>dasdasij daisodj sa doa s</p>
             <p>dasdasij daisodj sa doa s</p>
           <p>dasdasij daisodj sa doa s</p>
         <p>dasdasij daisodj sa doa s</p>
         <p>dasdasij daisodj sa doa s</p>
         <p>dasdasij daisodj sa doa s</p>
         <p>dasdasij daisodj sa doa s</p>
         <p>dasdasij daisodj sa doa s</p>
        </div>
        
        <footer><div class="center">1111111111dasdadas<br>adfa<br></div></footer>
</body>

CSS

body {
    padding: 0;
}

html, body {
    height:100%;
    
}
body h1, h2 {
    font-weight: bold;
    font-size: 120%;
    margin-top: 12px;
}
body p {
    margin-top: 8px;
}
.topRow {
    background-color: #eee;
    height: 50px;
    padding: 10px;
}
.headingLogo {
    float: right;
}

.menu {
    width:300px;
    height:100%;
    display:block;
    border:2px solid red;
    background-color:grey;
  position:absolute;
    top:130px;
    left:0;
    
}

.banner {
    width:100%;
    height:60px;
    background-color:red;
}

.center {
    text-align:center;
}

JavaScript

$(document).ready(function() {
    $('.topRow').scrollToFixed();
    
    
    $('.menu').scrollToFixed({ marginTop: 70, limit: $('footer').offset().top });
    
    
  
});