我的页脚内容不在我的滑出页脚中
My footer content is not in my slidout footer
本文关键字:我的 更新时间:2023-09-26
我无法将内容放入幻灯片页脚。我不知道为什么会发生这种事。我不确定是否必须将其添加到JavaScript中。
我将#slideFootercontent
添加到页脚中我想要的所有内容的开头,但它仍然不起作用。要明确的是,我希望内容与滑出页脚滑出。
我创建了一个codepen.io
<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&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
问题是您正在使用position:fixed
对#footerSlideContainer
和#footerSlideContent
进行样式设置(这样可以防止内容被隐藏)。
将按钮(#footerSlideButton
)移到#footerSlideContainer
之外,使其在容器隐藏时显示,然后适当地设置其余部分的样式。检查您修改的代码笔
请注意,我在这里和那里更改了一些内容,因为您有糟糕的选择器,使一些规则变得无用,也有产生问题的值。
相关文章:
- 为什么不't Javascript对我的输入值进行了一些重新检查
- 可以't让我的if语句处理js中的html表单输入
- 我的单元测试选项是什么
- 将输入字段中的文本提交到我的数据库,同时将其添加到我的列表中
- 我的职位回报太快了,如何做出承诺
- 我的jQuery插件参数没有正确启动,遇到了问题
- 如何识别我的网站中的慢速设备
- 如何将JSON数据导入我的ejs模板
- JQuery添加元素需要在我的js之前再次添加JQuery脚本
- 知道为什么我的旋转木马不会自动更改图片吗
- 我的模板未被解析
- 无法将数据从firebase获取到我的html页面
- 角度图表;t显示在我的页面中
- 我的AngularJS表达式没有'不起作用
- 将电视直播频道从网站嵌入我的网站
- /undefined在我的404错误日志中多次出现
- 为什么我的d3.jsselectAll+过滤器没有过滤
- 元素在我的代码中不会.fadeTo.Don'I don’我不知道;s错误的JavaScript、JQuery、H
- 我的javascript for循环不起作用
- 将当前时间添加到我的页面上的特定部分