javascript - 阻止 div 滑过页面顶部

Question

我在页脚上使用了媒体查询。我的页脚固定在底部。当用户单击切换按钮时，页脚容器会从页面底部向上滑动，这对于台式机和平板电脑非常有用。我的问题是，在智能手机上，容器会向上滑动，然后越过页面顶部。

我的解决方案是使用 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

这将防止页脚从页面顶部溢出。您可以更改下面的最大高度属性以满足您的需要。

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" });
});