如何修復此畫布外導航

Question

我有一個漂亮的“畫布外導航”，並嘗試對其進行修復。 這真讓我抓狂。

我以為你也許有個主意。

我用一個內部container ()嘗試了一些操作，並用溢出-y將其設置為固定位置：滾動並設置屏幕的高度（使用javascript – $(window).height() ）。

這樣，我可以擁有一個可滾動的大列表，並且菜單始終始終處於滾動狀態。 不幸的是，這會在移動設備和某些瀏覽器上引起一些滾動問題。

有誰知道如何修復此導航菜單？

提前致謝！

 /* 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

如果要在滾動頁面時使元素保持靜止，則需要使用position:fixed ，而不是absolute 。 但是，不應在滾動元素內放置固定元素，因為這會在某些移動瀏覽器上引起意外行為。 另外，打開菜單的腳本似乎不必要地復雜。

我建議如下：為每個元素提供希望它們在菜單關閉時具有的樣式。 然后，提供當元素打開一些修改的規則時需要更改的元素，並使它們僅在具有指定類（例如“ menuOpen”）時才適用。 然后使用JavaScript在需要更改的元素上打開或關閉該類。

我對頁面的結構進行了一些更改：您的內容現在在article ，您的頂部欄現在在header ，您的菜單在nav ，最后有一個div#darken元素可在菜單打開時創建變暗效果。 當您單擊菜單時，這些元素中的每一個都將獲得class menuOpen當您單擊menuOpen時，將僅刪除該類。

 $("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> 

我希望這是您想要的。