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

这样可以防止页脚从页面顶部溢出。您可以更改下面的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" });
});

阻止div滑过页面顶部

1 个答案: