jquery - Fixed Position Relative to Parent Div with sliding sidebar -
i sidebar push content across when opened have achived fixed navigation stays @ position of left: 0px; relative veiwport rather relative positioned parent element. nav's 100%
my sidebar works fine on firefox breaks out of parent in chrome
<!doctype html> <html> <head> <meta charset="utf-8"> <title>test page</title> <link rel="stylesheet" type="text/css" href="style.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> </head> <body> <div id="sidebar"> </div> <div class="content"> <div id="nav"> <p class="button"></p> </div> </div> <script type="text/javascript"> $('.button').click(function(){ $('.content').toggleclass('slide'); }); </script> </body> </html> my css
@font-face { font-family: 'icomoon'; src:url('fonts/icomoon.eot'); src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'), url('fonts/icomoon.woff') format('woff'), url('fonts/icomoon.ttf') format('truetype'), url('fonts/icomoon.svg#icomoon') format('svg'); font-weight: normal; font-style: normal; } *{ margin: 0; padding: 0; } #sidebar{ position: fixed; left: 0; top: 0; width: 250px; background: rgb(60,60,60); float:left; height: 600px; z-index: -1; } .content{ position: relative; left: 0; top: 0; width: 100%; height:600px; background: #fff; -moz-transition:all 0.4s ease-in-out; -webkit-transition:all 0.4s ease-in-out; } .slide{ left: 250px; } #nav{ position: fixed; top: 0; background: #0af; width: 100%; box-shadow: 1px 1px #ddd; } #nav p:before{ content: "\e000"; } .button{ font-family: 'icomoon'; font-size: 2em; color: #fff; cursor: pointer; margin: 10px; }
adding position: absolute; .slide{...}css fix problem in chrome, might have fix animation when .slide class removed
good luck
[update] here working example: http://jsfiddle.net/qdvkd/1/
fixing width , unneeded scroll of page: http://jsfiddle.net/qdvkd/2/
Comments
Post a Comment