如何解决使用 Bootstrap 4 时视差固定滚动不起作用
滚动时,我需要有一个包含内容的固定部分,并且只想滚动一个包含内容的部分。
当我在 Bootstrap-4 中使用脚本时,视差效果不起作用。这是预期的行为吗?
谁能指导我如何在使用脚本时产生视差效果?
任何帮助将不胜感激!
我做过的代码
$(window).scroll(function (e) {
parallax();
});
function parallax() {
var scrolled = $(window).scrollTop();
$(".hero").css("top",-(scrolled * 0.0315) + "rem");
}
.hero {
position: fixed;
z-index: 1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: bisque;
background-size: cover;
height: 100%;
width: 100%;
}
.content {
position: absolute;
left: 0;
z-index: 1000;
top: 80vh;
background: #2c7b99;
height: 100%;
width: 100%;
Box-shadow: 0 -2px 1px rgba(0,0.15);
border-top: 1px solid rgba(255,255,0.2);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<section class="hero">
<p>
<strong>Lorem Ipsum</strong> is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s,when an
unkNown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries,but
also the leap into electronic typesetting,remaining essentially
unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages,and more
recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum.
</p>
<p>
<strong>Lorem Ipsum</strong> is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s,and more
recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum.
</p>
</section>
</div>
<div class="row">
<section class="content">
<p>
<strong>Lorem Ipsum</strong> is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s,and more
recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum.
</p>
</section>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。