Question

我无法让我的内容适合我的滑出页脚。我不确定为什么会这样。我不确定是否必须将其添加到JavaScript中。

我将#slideFootercontent添加到页脚开头的所有内容中，但它仍然无效。为了清楚起见，我希望使用滑出页脚滑出内容。

<footer>
    <div  class="navbar-fixed-bottom">
        <div id="footerSlideContainer">
            <div id="footerSlideButton"></div>
            <div id="footerSlideContent" class="container ">
                <div class="row">
                    <div class="container">
                        <div class="row">
                            <br>
                            <hr>
                            <div class="col-lg-4">
                                <h3>Latest Tweets
                                </h3>
                                <div id="example1"></div>
                                <h4>Watch me on Periscope</h4>
                                <a href="https://www.periscope.tv/Erica2385" class="periscope-on-air" data-size="large">@Erica2385</a> 
                            </div>
                            <!-- col -->
                            <div class="col-lg-4 border">
                            </div>
                            <!-- col -->
                            <div class="col-lg-4">
                                <h3> Subscribe
                                </h3>
                                <p>Subscribe for the latest newsletters and updates</p>
                                <div id="mc_embed_signup" class="mailchimp">
                                    <form action="..." method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate form-inline" target="_blank" novalidate>
                                        <div class="form-group">
                                            <input type="email" value="" name="EMAIL" class="required email form-control" id="mce-EMAIL" placeholder="Enter email">
                                            <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn__bottom--border mailchimp__btn" data-style="shrink" data-horizontal>        
                                        </div>
                                        <div id="mce-responses" class="clear">
                                            <div class="response" id="mce-error-response" style="display:none"></div>
                                            <div class="response" id="mce-success-response" style="display:none"></div>
                                        </div>
                                        <div class="" style="position: absolute; left: -5000px;"><input type="text" name="..." value=""></div>
                                    </form>
                                    <span class="form_nospam">No spam</span>  
                                </div>
                                <!--End mc_embed_signup--> 
                            </div>
                            <!-- col -->
                        </div>
                        <!-- row -->
                    </div>
                    <!-- container -->
                    <hr class="container">
                    <div class="container">
                        <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 class="pull-right">
                            <iframe width="100" height="20" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/231337268&amp;color=ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>

Answer 1

问题是您使用#footerSlideContainer设置样式#footerSlideContent和position:fixed（这样可以防止隐藏内容）。

将按钮（#footerSlideButton）移到#footerSlideContainer之外，以便在隐藏该容器时显示，然后适当地设置其余部分的样式。查看your modified codepen

请注意，我在这里和那里改变了一些东西，因为你有一些糟糕的选择器使一些规则变得无用，而且值也会产生问题。

我的页脚内容不在我的滑动页脚中

1 个答案: