html - 滚动时如何将表单元素固定在屏幕底部显示?
问题描述
我有一个快速的问题。在我的网站https://www.metis-online.com上,如果你一直向下滚动页面,你会看到一个电子邮件营销搜索框。
我想要的是始终显示在固定在底部的屏幕上,这样无论用户是向上还是向下滚动。该营销搜索栏始终位于底部。
它几乎就像我的顶部导航栏,但位于屏幕底部。问题是虽然为导航栏做一个固定顶部很简单,因为它是 <nav>
元素的一部分,但营销搜索框有点棘手,因为它不是一个 `。
下面是这个的代码,我该如何设置呢?
/*--------Marketing Email-------*/
#marketing-email {
padding: 1em;
width: 100%;
text-align: center;
/*background-image: linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8));*/
background-color: #5398ff;
color: white;
border: 1px solid #1034A6;
}
#market-email {
padding: 0.5em;
width: 30%;
}
.marketing-btn {
background: #1034A6;
color: white;
padding: 0.5em;
border: 1px solid #fff;
}
<section id="marketing-email">
<form class="marketing-email-form" method="post" action="#mailing_list_email_sent">
<div>
<label for="email"><b>Stay updated on our new courses and services by joining our mailing list</b></label><br/>
<input type="email" id="market-email" name="market-email" required placeholder="Email" />
<button type="submit" class="marketing-btn">Send</button>
</div>
</form>
</section>
解决方案
你试过position: fixed;
吗?
#marketing-email {
position: fixed;
bottom: 1rem;
right: 1rem;
}
推荐阅读
- flutter - 如何在颤动中收听 UIApplication 生命周期 iOS
- matlab - 如何在 Octave / Matlab 中保存复杂条目的矩阵?
- scala - 如何根据开始日期列选择不同列的部分并合并到单个列中
- node.js - 如何从 s3 存储桶解析 CSV 以在 javascript AWS Lambda 函数中使用
- ios - 使用 UIView.animate 的屏幕过渡效果
- windows - 从 Windows 容器中的应用程序访问 Docker 机密
- python - 如何在 Airflow 中组合多个 DAG
- node.js - 从 DynamoDB 查询多个项目
- sql-server - 针对多个表之一的 SQL Server 外键
- git - 如何删除意外的双重提交 [Git]