Question

我有两个独立的div。一个是我点击一个链接，它打开一个侧边栏（用于导航），另一个div基本上是我的所有内容。

<div class='sidebar'>           
    links etc       
</div>

<div id="site"><a class='button-open' style="float: left;"></a>         
    All site information
</div>

.sidebar {
    position: absolute;
    width: 180px;
}

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

这是我认为有些事搞乱的地方。对于body（严格来说是侧边栏），背景设置为#556677

的颜色

 body {
        display: flex;
        font-family: Verdana;
        font-size: 12px;
        color: #333;
        background: #556677;
        overflow-x: hidden;
    }

但是对于网站（所有内容都是），我为图像设置了背景：

#site {
        flex: 1;
        font-family: Verdana;
        font-size: 12px;
        color: #333;
        background-image: url(../_images/bg.jpg);       
        transform: translate3d(0, 0, 0);
        transition: transform .3s;
    }

我认为这是问题;

html,
body { height: 100%; }

这是我向下滚动页面时的预览： http://i.stack.imgur.com/t5HxV.png

这是侧边栏的完整效果： http://sc-cdn.scaleengine.net/i/3cf3bd7855f21f47b671dcbb01741cff.png

这只是我打开导航的js：

 <script>
                    $('.button-open').on('click', function() {
                        $('#site').toggleClass('isOpen');
                    });
                </script>

当我向下滚动页面时，你们碰巧知道为什么会这样做？谢谢！

更新：

页脚：

<div id="footer">                               
    <div id="social">
        <ul class="social-links clearfix">                      
            <li class="instagram"><i class="icon-instagram"></i></li>               
            <li class="twitter"><i class="icon-twitter"></i></li>       
            <li class="skype"></i></li> 
        </ul>
    </div>                      
</div>

的CSS：

#footer {
    position: fixed; 
    bottom:0%;
    margin-left:5px;
    border: thin solid #CCC;
    background-color: #FFF;
    border-radius: 4px;
    -moz-border-radius: 4px;
    padding: 8px;
    padding-bottom: 3px;
    margin-bottom: 5px;
    width:151px;
}

滚动时仍然会看到隐藏的div

0 个答案: