阻止div滑過頁面頂部

Question

Im在頁腳上使用媒體查詢。我的頁腳固定在底部。當用戶點擊切換時，頁腳容器從頁面底部向上滑動，這對桌面和平板電腦非常有用。我的問題是，在智能手機上，容器向上滑動，然後越過頁面頂部。

我的解決方案是使用JQuery停止這個div滑過頁面頂部，然後用戶可以向下滾動容器（如果需要的話）。儘管建議其他解決方案。

麻煩是我沒有得到一個線索我將如何去做這件事。

讓我知道如果你需要更多的信息.​​..

FIDDLE：http://jsfiddle.net/danieljoseph/zgrhs11u/2/

CSS：

body { 
margin:0; 
padding:0; 
} 

footer { 
position:fixed; 
z-index:10; 
left:0; 
background:#000; 
bottom:0; 
z-index:1; 
} 

.container { 
width:100%; 
clear:both; 
display:block; 
} 

ul { 
width:25%; 
float:left; 
height:100%; 
padding:0; 
} 

.footToggle { 
cursor:pointer; 
color:#fff; 
height:50px; 
float:left; 
background:#f00; 
} 

footer > div:nth-child(2) { 
background:#f1f1f1; 
display:none; 
} 

@media screen and (max-width: 600px) { 
footer > div ul { 
width:100%; 
} 
} 

HTML：

<footer class="container"> 

<div class="container"> 
<a class="footToggle">CLICK HERE</a> 
</div> 

<div class="container"> 
    <ul> 
    <li><a href="#">text here</a></li> 
    <li><a href="#">text here</a></li> 
    <li><a href="#">text here</a></li> 
    <li><a href="#">text here</a></li> 
    <li><a href="#">text here</a></li> 
    </ul> 

    <ul> 
    <li><a href="#">text here</a></li> 
    <li><a href="#">text here</a></li> 
    <li><a href="#">text here</a></li> 
    <li><a href="#">text here</a></li> 
    <li><a href="#">text here</a></li> 
    </ul> 

    <ul> 
    <li><a href="#">text here</a></li> 
    <li><a href="#">text here</a></li> 
    <li><a href="#">text here</a></li> 
    <li><a href="#">text here</a></li> 
    <li><a href="#">text here</a></li> 
    </ul> 

    <ul> 
    <li><a href="#">text here</a></li> 
    <li><a href="#">text here</a></li> 
    <li><a href="#">text here</a></li> 
    <li><a href="#">text here</a></li> 
    <li><a href="#">text here</a></li> 
    </ul> 

    </div> 

<footer> 

JQUERY：

$(".footToggle").click(function(){ 
$("footer div:nth-child(2)").slideToggle(); 
$(".footToggle").toggleClass('changeBack'); 
}); 

Answer 1

這將防止頁腳從頁面頂部溢出。您可以更改下面的max-height屬性以適合您的需要。

footer.container { 
    max-height: 160px; 
    overflow-y: scroll; 
} 

這必須添加到您的移動媒體查詢部分。

@media screen and (max-width: 480px) { 
    footer.container { 
     max-height: 160px; 
     overflow-y: scroll; 
    } 
} 

純基於jQuery的解決方案，

// Footer 
$(".footToggle").click(function(){ 
    $("footer div:nth-child(2)").slideToggle(); 
    $("footer").css({ "maxHeight" : $(window).height(), "overflowY" : "scroll" }); 
});