实施现有代码以创建滑出式页脚

Question

我正在尝试添加滑出式页脚。类似于 GunsNRoses 网站的东西。我希望页面上有内容，但我不希望这会影响设计。所以我想使用 jQuery 添加滑出式页脚。我在 [JS Fiddle](https://jsfiddle.net/Nirvana11b/kvz48smq/"slide-out footer") 上找到了这段代码我试图将它实现到我的代码中，但我运行遇到了一些困难。我真的很感激你的帮助。我创建了一个代码笔，所以你可以看一下代码。提前致谢。

 <footer class="navbar-fixed-bottom">

    <div id="footerSlideContainer">
      <div id="footerSlideButton"></div>
      <div id="footerSlideContent">
        <iframe width="40%" height="60" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/226657681&amp;color=999999&amp;auto_play=true&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"></iframe>
        <p class="pull-left hidden-xs"> &copy; Copyright </p>

        <div class="pull-right">
          <div class="navbar-text pull-right">
            <a href="https://www.facebook.com/alwayssunny/?fref=ts" target="_blank"><i class="fa fa-facebook fa-2x"></i></a>
            <a href="https://twitter.com/alwayssunny?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor" target="_blank"><i class="fa fa-twitter fa-2x"></i></a>
            <a href="https://soundcloud.com/allisondanger/its-always-sunny-in-philadelphia-intro" target="_blank"><i class="fa fa-soundcloud fa-2x"></i></a>
          </div>
        </div>
       </div>
    </div>
  </footer>

    <script>(function($) {
        var open = false;
        $('#footerSlideButton').click(function () {
            if(open === false) {
                $('#footerSlideContent').animate({ height: '50px' });
                $(this).css('backgroundPosition', 'bottom left');
                open = true;
            } else {
                $('#footerSlideContent').animate({ height: '0px' });
                $(this).css('backgroundPosition', 'top left');
                open = false;
            }
        });     
    });
</script>

Answer 1

我编辑了您的代码笔，并做了一些更改，如果您使用 class 'navbar-fixed-bottom' 将 jQuery 过渡应用于包含的页脚，您可以更轻松地应用幻灯片。

CSS:

.navbar-fixed-bottom {
    position: fixed;
    bottom: -20px;
    height: 0px;
    width: 100%;
    background-color:#ffffff;   
    padding: 10px 0;
}

#footerSlideButton {
    background: orange;
    position: absolute;
    top: -55px;
    right: 20px;
    width:50px;
    height:50px;
    border: none;
    cursor: pointer;
}

jQuery:

var open = false;
$('#footerSlideButton').click(function () {
   if(open === false) {
      $('.navbar-fixed-bottom').animate({ height: '100px' });
      $(this).css('backgroundPosition', 'bottom left');
      open = true;
   } else {
      $('.navbar-fixed-bottom').animate({ height: '0px' });
      $(this).css('backgroundPosition', 'top left');
      open = false;
   }
});

看看我的代码笔：

http://codepen.io/sshhdaniella/pen/VvBjdZ

实施现有代码以创建滑出式页脚

Implement existing code to create a slide-out footer

html

javascript

jquery

footer

slide