Question

我有一个漂亮的Off-Canvas导航，我试着修复它。这让我发疯了。

我想也许你有个主意。

我尝试使用内部container ()并使用overflow-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元素，用于在菜单打开时创建变暗效果。当您单击菜单时，这些元素中的每一个都将获得类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>

我希望这就是你要找的东西。

如何修复此Off-Canvas导航

1 个答案: