点击时部分隐藏固定页脚

Question

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

我尝试使用底部值但是它没有隐藏页脚，只有在页面变得更高时才将其推到下面以便为它腾出空间：

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

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

MARKUP：

<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代码中进行修改。但是，您当前使用的jQuery事件处理套件中的toggle()仍然可以正常工作。

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

$('#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>

Answer 2

您必须做的事情imho不是.toggle() #footer_arrow元素。点击.toggle()

后，您需要#footer_wrap #footer_arrow个元素

请看这个小提琴：http://jsfiddle.net/tdcrsn2j/

我已经改变了你的HTML＆amp; CSS有点，但你可以把它带回来。这只是为了展示案例。

Answer 3

跟着这个

当你想要显示

时

$('#footer_wrap').css({"display":"block"});

当你想要隐藏

时

$('#footer_wrap').css({"display":"none"});