javascript - 单击时部分隐藏固定页脚

Question

我的固定页脚顶部有一个箭头图标。单击箭头应将页脚“降低”到页面下方，直到只有箭头可见。再次单击它应该会带回页脚。

我尝试使用 bottom 值，但它不会隐藏页脚，只会在页面变高以为它腾出空间时将其推到下方:

$('#footer_arrow').toggle(function() {
    $('#footer_wrap').css('bottom', '-84px');
}, function() {
    $('#footer_wrap').css('bottom', '0');
});

我想要相同的，但页脚实际上消失在页面下方，只有顶部可见箭头。

标记:

<div id='footer_wrap'>          
    <footer>    
        <div id='footer_arrow'></div>
        <div>       
            content
        </div>      
    </footer>   
</div>

CSS:

#footer_wrap {
    position: absolute;
    bottom: 0;
    height: 84px;
}
footer {
    position: absolute;
    bottom: 0;
    z-index: 9999;    
    position: relative; 
}
#footer_arrow {
    position: absolute;
    width: 61px;
    height: 23px;
    top: -23px;
    left: 50%;
    background: url(images/footer_arrow.jpg) 0 0 no-repeat;
    z-index: 9999;
    cursor: pointer;
}

Answer 1

几件事。首先，我建议使用 toggleClass() 而不是 toggle()。这样，您只需添加一个具有所需 CSS 的类，然后使用 toggleClass() 切换它。这样，您可以从纯 CSS 更改任何必要的样式，而不是在 JavaScript 代码中进行修改。然而，toggle()尽管如此，您当前使用的 jQuery 事件处理套件仍然可以正常工作。

其次，要将页脚移出屏幕，您需要在 #footer_wrap 上使用 fixed 定位而不是 absolute。否则，底部相对于页面移动，这意味着它只是扩展了它。但是，对于 fixed，元素位于视口(viewport)中的固定点，可以在不扩展页面的情况下将其移出屏幕。

$('#footer_arrow').click(function() {
    $('#footer_wrap').toggleClass('down');
});

#footer_wrap {
    position: fixed;
    bottom: 0;
    height: 84px;
}
footer {
    position: absolute;
    bottom: 0;
    z-index: 9999;    
    position: relative; 
}
#footer_arrow {
    position: absolute;
    width: 61px;
    height: 23px;
    top: -23px;
    left: 50%;
    background: url(http://www.placehold.it/61x23) 0 0 no-repeat;
    z-index: 9999;
    cursor: pointer;
}

.down {
    bottom: -84px !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='footer_wrap'>          
    <footer>    
        <div id='footer_arrow'></div>
        <div>       
            content
        </div>      
    </footer>   
</div>