如何修复此画布外导航

Question

I've got a beautiful Off-Canvas Navigation and I try to make it fixed. This is driving me crazy.

I thought that maybe you'd have an idea.

I tried something with an inner container () and set it as fixed position with overflow-y: scroll and set the height of the screen (with javascript – $(window).height() ).

That way I can have a big list that is scrollable and still have the menu always there on scroll. Unfortunately this cause some scrolling problems on mobile devices and some browsers.

Does anyone know how to make this navigation menu fixed?

Thanks in advance!

 /* MAIN */ body { font-family: 'Roboto', sans-serif; font-size: 100%; color: #444; text-align: left; position: relative; overflow-x: hidden; } *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .clearfix:before, .clearfix:after { content: ''; display: table; } .clearfix:after { clear: both; } * { margin: 0; padding: 0; } img { width: 100%; height: 100%; margin: 0 auto; border: 0; } a { text-decoration: none; color: #444; } /* MAIN */ /* NAVIGATION */ .navbar { position: fixed; top: 0; left: 0; width: 100%; padding: 0; height: 50px; z-index: 2; background: #FFF; } #menupush { position: relative; float: left; padding: 0px 27px; margin: 0px; border: none; outline: none; cursor: pointer; height: 50px; background-color: transparent; } #menupush span { float: left; height: 50px; line-height: 52px; padding-left: 12px; font-weight: 600; letter-spacing: .1875rem; font-size: .625rem; text-rendering: auto; -webkit-font-smoothing: initial; color: #1D1D1F; text-transform: uppercase; } .burger { float: left; height: 50px; padding-top: 16px; } .burger li { width: 18px; height: 2px; background: #444; margin: 3px 0; list-style: none; } #close-button { width: 16px; height: 16px; position: absolute; right: 20px; top: 18px; overflow: hidden; text-indent: 16px; border: none; z-index: 1001; outline: none; background: transparent; color: transparent; cursor: pointer; } #close-button::before, #close-button::after { content: ''; position: absolute; width: 2px; height: 100%; top: 0; left: 50%; background: #9c9c9c; } #close-button::before { -webkit-transform: rotate(45deg); transform: rotate(45deg); } #close-button::after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } #close-button:hover::before, #close-button:hover::after { background: #fff; } .st-content { overflow: hidden; -webkit-transition: all 0.5s; transition: all 0.5s; } .st-container { overflow: hidden; position: relative; } .st-pusher { position: relative; left: 0; z-index: 99; height: 100%; -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; } .st-pusher::after { position: absolute; top: 0; right: 0; width: 0; height: 0; background: rgba(29,29,31,.6); z-index: 90; content: ''; opacity: 0; -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; } .st-menu-open .st-pusher::after { width: 100%; height: 100%; opacity: 1; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; } .st-menu { position: absolute; top: 0; left: 0; z-index: 100; visibility: hidden; width: 280px; height: 100%; background: #1D1D1F; -webkit-transition: all 0.5s; transition: all 0.5s; } .st-menu::after { position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.2); content: ''; opacity: 1; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; } .st-menu-open .st-menu::after { width: 0; height: 0; opacity: 0; -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; } .st-menu div { width: 100%; opacity: 0; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; text-transform: uppercase; } .st-menu-open .st-menu div { opacity: 1; } .st-menu div h3 { font-weight: 400; font-size: .8125rem; color: #FFF; letter-spacing: .3rem; margin: 60px 0 37px 40px; } .st-menu ul { padding-top: 80px; list-style: none; font-weight: 400; color: #9c9c9c; margin: 0 0 36px 40px; padding: 2px 0 7px; font-size: .625rem; letter-spacing: .2rem; } .st-menu ul li { display: block; position: relative; width: 200px; height: 40px; line-height: 40px; margin: 0 0 5px; } .st-menu ul li a { display: block; position: relative; width: 100%; height: 27px; -webkit-transition: all 500ms cubic-bezier(.39,.575,.565,1); -moz-transition: all 500ms cubic-bezier(.39,.575,.565,1); transition: all 500ms cubic-bezier(.39,.575,.565,1); color: #9c9c9c; overflow: hidden; } .st-menu ul li a:hover { text-indent: 5px; color: #FFF; } .st-menu-open .st-pusher { -webkit-transform: translate3d(280px, 0, 0); transform: translate3d(280px, 0, 0); } .st-menu-open .st-content { -webkit-transform: translate3d(-140px, 0, 0); transform: translate3d(-140px, 0, 0); } .st-menu { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .st-menu-open .st-menu { visibility: visible; -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; } .st-menu::after { display: none; } .st-menu-open .st-menu { visibility: visible; -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; } /* NAVIGATION */ /* PRODUCTS */ .grid { float: left; width: 100%; background: #eaeaec; list-style: none; margin: 0; padding: 50px 0px 0px 0px; overflow: hidden; } .grid li { display: block; float: left; width: 100%; overflow: hidden; -webkit-transition: background 60ms ease-in; -moz-transition: background 60ms ease-in; -ms-transition: background 60ms ease-in; -o-transition: background 60ms ease-in; transition: background 60ms ease-in; cursor: pointer; } .grid li a { display: block; float: left; } .grid li img { float: left; width: 100%; -webkit-transform: translateY(50px); -moz-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px); -webkit-transition: -webkit-transform 0.4s; -moz-transition: -moz-transform 0.4s; transition: transform 0.4s; } @media only screen and (min-width: 560px){ .grid li { width: 50%; } } @media only screen and (min-width: 1200px){ .grid li { width: 33.3333%; } } /* PRODUCTS */ 

 <script src="http://cardstock-test.de/js/modernizr.custom.js"></script> <div id="st-container" class="st-container"> <div class="st-pusher"> <div class="st-menu"> <div> <button id="close-button">Close Menu</button> <h3>Menu</h3> <ul> <li><a href="index.html">Feinleinen</a></li> <li><a href="index.html">Bilderdruck</a></li> <li><a href="index.html">Lederfaser</a></li> <li><a href="index.html">Metallic</a></li> </ul> <ul> <li><a href="index.html">Sonderanfertigung</a></li> <li><a href="index.html">Muster bestellen</a></li> <li><a href="index.html">Über uns</a></li> <li><a href="index.html">FAQ</a></li> <li><a href="index.html">Kontakt</a></li> </ul> </div> </div> <div class="st-content"> <div class="navbar"> <button id="menupush"> <ul class="burger"> <li></li><li></li><li></li> </ul> <span>Menu</span> </button> </div> <ul class="grid" id="grid"> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a></li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a> </li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a> </li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a></li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a></li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a> </li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a> </li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a></li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a></li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a> </li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a> </li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a></li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a></li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a> </li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a> </li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a></li> </ul> </div> </div> </div> <script src="http://cardstock-test.de/js/classie.js"></script> <script src="http://cardstock-test.de/js/sidebarEffects.js"></script> 

Answer 1

If you want to have an element stay stationary when the page is scrolled, you need to use position:fixed , not absolute . However, you shouldn't place a fixed element inside the scrolling element, because this can cause unexpected behaviour on some mobile browsers. Also, the script for opening the menu seemed to be unnecessarily complicated.

I suggest the following: Give each element the styling you want them to have when the menu is closed. Then, give the elements that need to change when the element opens some modified rules and make them apply only when they have a specified class, like "menuOpen". Then use JavaScript to toggle that class on or off on the elements that need to change.

I changed the structure of your page a little bit: Your content is now inside article , your top-bar is now inside header , your menu is inside nav and finally there's a div#darken element to create the darkening effect when the menu is open. Each of these elements will get the class menuOpen when you click on menu and the class is simply removed when you click to close.

 $("header").click(openMenu); $("#close-button,#darken").click(closeMenu); function openMenu() { $("article,nav,header,#darken").addClass("menuOpen"); } function closeMenu() { $("article,nav,header,#darken").removeClass("menuOpen"); } 

 /* New stuff */ header { position:fixed; top:0; left:0; width:100vw; height:50px; background-color:white; padding:0; padding-left:10px; line-height:50px; transition:left .5s; } header.menuOpen { left:140px; } #darken { height:100vh; width:100vw; position:fixed; top:0; left:100vw; background-color:black; opacity:0; transition:opacity .5s; } #darken.menuOpen { left:0; opacity:.5; } article { position:fixed; top:50px; left:0; height:calc(100vh - 50px); width:100vw; transition:left .5s; overflow-y:auto; } article.menuOpen { left:140px; } nav { position:fixed; left:-280px; top:0; height:100vh; width:280px; background-color:#1D1D1F; transition:left .5s; overflow-y:auto; } nav.menuOpen { left:0; } /* Old and less relevant stuff */ body { font-family:Arial; } .burger { display:inline-block; padding:0; margin:0 10px 0 0; vertical-align:middle; } .burger li { width: 18px; height: 2px; background: #444; margin: 3px 0; list-style: none; } header span { vertical-align:middle; } #close-button { width: 16px; height: 16px; position: absolute; right: 20px; top: 18px; overflow: hidden; text-indent: 16px; border: none; z-index: 1001; outline: none; background: transparent; color: transparent; cursor: pointer; } #close-button::before, #close-button::after { content:''; position: absolute; width: 2px; height: 100%; top: 0; left: 50%; background: #9c9c9c; } #close-button::before { -webkit-transform: rotate(45deg); transform: rotate(45deg); } #close-button::after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } #close-button:hover::before, #close-button:hover::after { background: #fff; } .st-menu * { opacity: 0; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; text-transform: uppercase; } .st-menu.menuOpen * { opacity: 1; } .st-menu h3 { font-weight: 400; font-size: .8125rem; color: #FFF; letter-spacing: .3rem; margin: 60px 0 37px 40px; } .st-menu ul { padding-top: 80px; list-style: none; font-weight: 400; color: #9c9c9c; margin: 0 0 36px 40px; padding: 2px 0 7px; font-size: .625rem; letter-spacing: .2rem; } .st-menu ul li { display: block; position: relative; width: 200px; height: 40px; line-height: 40px; margin: 0 0 5px; } .st-menu ul li a { display: block; position: relative; width: 100%; height: 27px; -webkit-transition: all 500ms cubic-bezier(.39, .575, .565, 1); -moz-transition: all 500ms cubic-bezier(.39, .575, .565, 1); transition: all 500ms cubic-bezier(.39, .575, .565, 1); color: #9c9c9c; overflow: hidden; } .st-menu ul li a:hover { text-indent: 5px; color: #FFF; } /* Some of your own stuff */ .grid { float: left; width: 100%; background: #eaeaec; list-style: none; margin: 0; padding: 0; overflow: hidden; } .grid li { display: block; float: left; width: 100%; overflow: hidden; -webkit-transition: background 60ms ease-in; -moz-transition: background 60ms ease-in; -ms-transition: background 60ms ease-in; -o-transition: background 60ms ease-in; transition: background 60ms ease-in; cursor: pointer; } .grid li a { display: block; float: left; } .grid li img { float: left; width: 100%; -webkit-transform: translateY(50px); -moz-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px); -webkit-transition: -webkit-transform 0.4s; -moz-transition: -moz-transform 0.4s; transition: transform 0.4s; } @media only screen and (min-width: 560px) { .grid li { width: 50%; } } @media only screen and (min-width: 1200px) { .grid li { width: 33.3333%; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header> <ul class="burger"> <li></li> <li></li> <li></li> </ul><span>Menu</span> </header> <article> <ul class="grid" id="grid"> <li> <a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a> </li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a> </li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a> </li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a> </li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a> </li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a> </li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a> </li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a> </li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a> </li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a> </li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a> </li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a> </li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a> </li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a> </li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a> </li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a> </li> </ul> </article> <div id="darken"></div> <nav class="st-menu"> <button id="close-button">Close Menu</button> <h3>Menu</h3> <ul> <li><a href="index.html">Feinleinen</a> </li> <li><a href="index.html">Bilderdruck</a> </li> <li><a href="index.html">Lederfaser</a> </li> <li><a href="index.html">Metallic</a> </li> </ul> <ul> <li><a href="index.html">Sonderanfertigung</a> </li> <li><a href="index.html">Muster bestellen</a> </li> <li><a href="index.html">Über uns</a> </li> <li><a href="index.html">FAQ</a> </li> <li><a href="index.html">Kontakt</a> </li> </ul> </nav> 

I hope this is what you were looking for.