Vuejs：Scroll Reveal的页脚

Question

我尝试使用类似https://codepen.io/nickcil/pen/Eoqiv

的滚动显示做页脚

#footer {
  height: 200px;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: -1;
}

它很容易实现，但由于内容的页脚边距链接不会被点击。 我试过这个lib https://www.npmjs.com/package/vue-scroll-reveal 而动画并不是我想要的。

我不知道如何在我的Vue项目中实现滚动显示，请帮忙！

Answer 1

你想要一个带有可点击链接的滚动显示的页脚吗？ 我创建了这样的东西： https://jsfiddle.net/cev2b7t6/1/

＆＃13;

＆＃13;

body {
  margin: 0;
}
#content {
  width: 100%;
  height: 800px;
  text-align: center;
  background-color: #FFF;
  background-image: url('http://www.clker.com/cliparts/r/q/r/j/F/K/black-and-white-skyline-hi.png');
  background-repeat:no-repeat; background-position:center 690px;
  background-size: 250px;
  margin-bottom: 220px;
  position: relative;
  z-index: 2;
}
#footer {
    background: tomato;
    color: #fff;
    padding-top: 375px;
    vertical-align: middle;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 0;
}

＆＃13;

<div id="main">
  <div id="content">&nbsp;</div>
</div>
<div id="footer">
  <h1>San Francisco</h1>
  <p>123 Easy St<br>
    San Francisco, CA 94104<br>
    415 555 0234</p>
  <a href="/">link</a>
</div>

＆＃13;

＆＃13;

＆＃13;