Question

我有一个扩展了click的div，到目前为止我做了这个工作。麻烦的是我需要按钮保持固定在页面的底部，在页面的末尾，它保持在页脚的顶部（在.bottom和页脚之上）。我怎么能这样做？

HTML

<section></section>

<aside>
  <div class="button"></div>
  <div class="container">
  <div class="bar">
    <div class="close">X</div>
    <img src="http://lorempixel.com/output/cats-h-c-353-480-3.jpg"><img src="http://lorempixel.com/output/cats-h-c-353-480-2.jpg"><img src="http://lorempixel.com/output/animals-h-c-353-480-2.jpg">
   </div>
  </div>

</aside>

<div class="bottom"></div>
<footer></footer>

CSS

body {
  margin: 0;
  padding: 0;
}

.button {
  width: 150px;
  height: 50px;
  background-color: grey;
  position: absolute;
  z-index: 100;
  bottom: 0;
  left: 20%;
  cursor: pointer;
}

.bar {
  position: absolute;
  overflow: hidden;
  width: 1300px;
  left: -20%;
  background-color: aliceblue;
}

.close {
  color: white;
  background: black;
  width: 40px;
  height: 40px;
  cursor: pointer;
  text-align: center;
  font-size: 24px;
  float: right;
}

aside {
  position: relative;
  width: 1024px;
}

.container{
  left: 20%;
  width: 50%;
  position: relative;
  bottom: 0px;
  z-index: 1;
}

footer {
  background-color: #000;
  position: relative;
  width:100%;
  height: 50px;
  z-index: 9999;
}

.bottom {
  background-color: pink;
  position: relative;
  width:100%;
  height: 50px;
  z-index: 9999;
}

section {
  height: 700px;
  background-color: blue;
}

JS

$('.bar').hide();

$('.button').click(function() {
  $(this).animate({
    top: -500});
  $('.bar').show();
  $('.container').animate({
    top: -450});
});

  $('.close').click(function(){
    $('.button').animate({
    top: -50});
    $('.bar').slideDown().fadeOut(500);
    $('.container').animate({
    top: 0});
  });

CodePen：

http://codepen.io/anon/pen/CFDcL

Answer 1

添加按钮：

bottom: -50px;  /* instead of 0 */
z-index: 10000; /* just cause footer is 9999 :) */

固定在页面底部的按钮会在单击时展开子div

1 个答案: