Question

我目前正在我的网站footer上工作，如果用户点击Contact Us页脚后面出现黄色div，我希望如此。

Here is what I'm working on so far现在，但我似乎无法将黄色方框放在页脚后面。当可见时，黄色区域的高度大约为300px。

＆＃13;

var clicked=true;
$(".one").on('click', function(){
    if(clicked)
    {
        clicked=false;
        $(".two").css({"top": 0});
    }
    else
    {
        clicked=true;
        $(".two").css({"top": "40px"});
    }
});

＆＃13;

footer {
  width:100%;
  display:block;
  background:#ccc;
  position:fixed;
  bottom:0;
  left:0
}

.container {
    overflow:hidden;
    height: 60px;
    float:left;
}
.one {
    position: relative;
    bottom: 0;
    background-color: lightblue;
    z-index: 1;
    cursor:pointer;
    overflow: hidden;
    height: 40px;
}
.two {
    position: relative;
    bottom: 40px;
    background-color: yellow;
    z-index: -1;
    -webkit-transition: top 1s;
    -moz-transition: top 1s;
    -o-transition: top 1s;
    transition: top 1s;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="container">
    <div class="two">I slide!<br>And I am higher than the div before me...</div>
</div>

<footer>
  <ul>
  <li><a href="">Privacy Policy</a></li>
  <li><a href="#" class="one">Contact Us</a></li>
  </ul>
</footer>

＆＃13;

谢谢。

Answer 1

这是工作幻灯片：

.container {
    overflow: hidden;
    height: 60px;
    float: left;
    position: absolute; /*add this, and */
    bottom: 20px; /* this*//*pixel based on what you wish*/
}

更新的演示：
检查更新小提琴Here

Answer 2

试试这个。它使用jQuery动画来滑动。

http://jsfiddle.net/armqc25a/

<强> JS

var clicked=true;
$(".one").on('click', function(){
    if(clicked)
    {
        clicked=false;
        $(".container").animate({"bottom": "0px"});
    }
    else
    {
        clicked=true;
        $(".container").animate({"bottom": "40px"});
    }
});

<强> CSS

footer {
  width:100%;
  background:#ccc;
  position: fixed;
  bottom:0;
  height: 40px;
  left:0;
  z-index: 1000;
}

.container {
    overflow:hidden;
    height: 40px;
    position: absolute;
    bottom:0;
    width: 100%;
    z-index: 1;
}
.one {
    position: relative;
    background-color: lightblue;
    cursor:pointer;
}
.two {
    position: relative;
    background-color: yellow;
    -webkit-transition: top 1s;
    -moz-transition: top 1s;
    -o-transition: top 1s;
    transition: top 1s;
}

使用jQuery进行SlideUp效果

2 个答案: