侧栏关闭时图像固定位置不返回

时间:2015-12-10 09:19:27

标签: javascript html css fixed sidebar

我有一张固定位置的背景图片。 我还有一个左侧栏导航,可以打开/关闭,将所有屏幕移到侧面(仅限CSS) 我无法找到为什么在我打开侧栏并关闭它之后图片没有返回到全屏并且我在右侧获得了这个白色打击(附图像) 滚动后,图片返回看起来没问题。

背景图片的CSS代码:

background: url(../img/plane-bg.jpg) no-repeat center center fixed;

侧栏的CSS(只是相关的东西):

.navigation-2 {
    /* critical sizing and position styles */
    width: 100%;
    height: 100%;
    position: fixed;
    right: 0;
    left: 0;
    z-index: 0;
}


/* Site Wrapper - Everything that isn't navigation */
.site-wrap {
    /* Critical position and size styles */
    min-height: 100%;
    min-width: 100%;
    position: relative;
    top: 0;
    bottom: 100%;
    left: 0;
    z-index: 1;

}

/* Nav Trigger */

label[for="nav-trigger"] {
    position: fixed;
    left: 15px;
    top: 20px;
    z-index: 2;

}

/* Make the Magic Happen */
.nav-trigger + label, .site-wrap {
    transition: left 0.2s;
}

.nav-trigger:checked + label {
    left: 215px;
}

.nav-trigger:checked ~ .site-wrap {
    left: 200px;
    box-shadow: 0 0 5px 5px #233374;
}

导航的html代码:

<!--<nav>-->
<ul class="navigation-2">
    <img src="img/fc-logo-white.png" width="100px">
    <li class="nav-item-2"><a href="#">Home</a></li>
    <li class="nav-item-2"><a href="#">About</a></li>
    <li class="nav-item-2"><a href="#">Our Companies</a></li>
    <li class="nav-item-2"><a href="#">Career</a></li>
    <li class="nav-item-2"><a href="#">Contact</a></li>
</ul>

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger"></label>

<!--</nav>-->

关闭侧栏后出现的错误:

The bug that appear after closing the side bar - image

非常感谢任何帮助! 谢谢, SHIR

0 个答案:

没有答案