javascript - 当部分到达顶部时，固定左 div 并滚动右 div 直到该部分的末尾
问题描述
当到达顶部时，我必须显示固定的左列，右 div 将滚动。结束该部分后，左 div 将相对更改它，以便它也将在该部分的末尾滚动。
我尝试了下面的代码，但它对我来说并不完美。它也在改变宽度。
我试过 if ($(window).scrollTop() >= 350) {了，不完美。它在滚动达到 350 时处于活动状态。当我的部分到达顶部时，我需要固定左 div 并滚动右 div。
$(function() {
$(window).scroll(function() {
//After scrolling 100px from the top...
if ($(window).scrollTop() >= 350) {
$('.leftDiv').css('position', 'fixed');
$('.leftDiv').css('top', '0px');
//Otherwise remove inline styles and thereby revert to original stying
} else {
$('.leftDiv').css('position', 'static');
}
});
});<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<div class="container">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie risus.
Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium, velit dui
pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis turpis sed urna
tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare nisl. Quisque mollis est
nulla, eget aliquam nisi dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus enim non mollis. Aenean finibus
urna ipsum, id aliquet odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare magna, eu egestas arcu sapien vel dui.
Proin ligula erat, vestibulum malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non vestibulum pellentesque. </p>
</div>
</section>
<section>
<div class="container">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie risus.
Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium, velit dui
pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis turpis sed urna
tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare nisl. Quisque mollis est
nulla, eget aliquam nisi dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus enim non mollis. Aenean finibus
urna ipsum, id aliquet odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare magna, eu egestas arcu sapien vel dui.
Proin ligula erat, vestibulum malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non vestibulum pellentesque. </p>
</div>
</section>
<section>
<div class="container">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie risus.
Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium, velit dui
pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis turpis sed urna
tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare nisl. Quisque mollis est
nulla, eget aliquam nisi dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus enim non mollis. Aenean finibus
urna ipsum, id aliquet odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare magna, eu egestas arcu sapien vel dui.
Proin ligula erat, vestibulum malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non vestibulum pellentesque. </p>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="leftDiv">
<h2>This div will fixed once touch the top bar and scroll right div</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
</div>
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
<div class="rightDiv">
<h2>Lorem Ipsum is simply dummy text</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie
risus. Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium,
velit dui pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis
turpis sed urna tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare
nisl. Quisque mollis est nulla, eget aliquam nisi dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus
enim non mollis. Aenean finibus urna ipsum, id aliquet odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare
magna, eu egestas arcu sapien vel dui. Proin ligula erat, vestibulum malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non
vestibulum pellentesque. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie
risus. Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium,
velit dui pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis
turpis sed urna tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare
nisl. Quisque mollis est nulla, eget aliquam nisi dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus
enim non mollis. Aenean finibus urna ipsum, id aliquet odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare
magna, eu egestas arcu sapien vel dui. Proin ligula erat, vestibulum malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non
vestibulum pellentesque. </p>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie risus.
Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium, velit dui
pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis turpis sed urna
tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare nisl. Quisque mollis est
nulla, eget aliquam nisi dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus enim non mollis. Aenean finibus
urna ipsum, id aliquet odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare magna, eu egestas arcu sapien vel dui.
Proin ligula erat, vestibulum malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non vestibulum pellentesque. </p>
</div>
</section>
<section>
<div class="container">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie risus.
Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium, velit dui
pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis turpis sed urna
tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Donec rutrum gravida ultricies. Morbi eleifend a turpis
et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl
at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat
bibendum. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Interdum et
malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare nisl. Quisque mollis est nulla, eget aliquam nisi
dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus enim non mollis. Aenean finibus urna ipsum, id aliquet
odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare magna, eu egestas arcu sapien vel dui. Proin ligula erat, vestibulum
malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non vestibulum pellentesque. </p>
</div>
</section>解决方案
在页面加载时，使用 查找页面中的元素位置，使用 查找.offset()它的宽度.width()。
.css()此外，如果将它们格式化为对象，则可以使用 , 一次传递多个 CSS 属性（见下文）。
现在......您还必须关心下面的下一行......所以一个简单的数学将比较 scrollTop 以便在下一行出现时立即“取消修复” div。那就是 scrollTop + 行高 - div 的高度。
$(function() {
// Get position and width
var position = $(".leftDiv").offset().top;
var width = $(".leftDiv").width();
// Get the height and the row height
var height = $(".leftDiv").height();
var row_height = $(".leftDiv").parents(".row").height();
$(window).scroll(function() {
// Compare scrollTop with the div position
if ($(window).scrollTop() >= position && $(window).scrollTop() <= position + row_height - height) {
$('.leftDiv').css({
position: 'fixed',
top: 0,
width: width // Ensure to keep its width
});
//Otherwise remove inline styles and thereby revert to original stying
} else {
$('.leftDiv').css({
position: 'static'
});
}
});
// Resize issue... Since the width has been set once
$(window).on("resize", function() {
// Remove the width and position properties to redefine all variables
$(".leftDiv").css({
position: 'static',
width: "initial"
});
// Get position and width
position = $(".leftDiv").offset().top;
width = $(".leftDiv").width();
// Get the height and the row height
height = $(".leftDiv").height();
row_height = $(".leftDiv").parents(".row").height();
// Run the scroll adjusments...
$(window).trigger("scroll");
});
});<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<div class="container">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie risus.
Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium, velit dui
pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis turpis sed urna
tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare nisl. Quisque mollis est
nulla, eget aliquam nisi dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus enim non mollis. Aenean finibus
urna ipsum, id aliquet odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare magna, eu egestas arcu sapien vel dui.
Proin ligula erat, vestibulum malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non vestibulum pellentesque. </p>
</div>
</section>
<section>
<div class="container">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie risus.
Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium, velit dui
pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis turpis sed urna
tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare nisl. Quisque mollis est
nulla, eget aliquam nisi dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus enim non mollis. Aenean finibus
urna ipsum, id aliquet odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare magna, eu egestas arcu sapien vel dui.
Proin ligula erat, vestibulum malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non vestibulum pellentesque. </p>
</div>
</section>
<section>
<div class="container">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie risus.
Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium, velit dui
pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis turpis sed urna
tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare nisl. Quisque mollis est
nulla, eget aliquam nisi dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus enim non mollis. Aenean finibus
urna ipsum, id aliquet odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare magna, eu egestas arcu sapien vel dui.
Proin ligula erat, vestibulum malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non vestibulum pellentesque. </p>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="leftDiv">
<h2>This div will fixed once touch the top bar and scroll right div</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
</div>
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
<div class="rightDiv">
<h2>Lorem Ipsum is simply dummy text</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie
risus. Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium,
velit dui pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis
turpis sed urna tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare
nisl. Quisque mollis est nulla, eget aliquam nisi dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus
enim non mollis. Aenean finibus urna ipsum, id aliquet odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare
magna, eu egestas arcu sapien vel dui. Proin ligula erat, vestibulum malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non
vestibulum pellentesque. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie
risus. Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium,
velit dui pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis
turpis sed urna tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare
nisl. Quisque mollis est nulla, eget aliquam nisi dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus
enim non mollis. Aenean finibus urna ipsum, id aliquet odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare
magna, eu egestas arcu sapien vel dui. Proin ligula erat, vestibulum malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non
vestibulum pellentesque. </p>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie risus.
Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium, velit dui
pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis turpis sed urna
tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare nisl. Quisque mollis est
nulla, eget aliquam nisi dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus enim non mollis. Aenean finibus
urna ipsum, id aliquet odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare magna, eu egestas arcu sapien vel dui.
Proin ligula erat, vestibulum malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non vestibulum pellentesque. </p>
</div>
</section>
<section>
<div class="container">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie risus.
Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium, velit dui
pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis turpis sed urna
tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Donec rutrum gravida ultricies. Morbi eleifend a turpis
et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl
at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat
bibendum. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Interdum et
malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare nisl. Quisque mollis est nulla, eget aliquam nisi
dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus enim non mollis. Aenean finibus urna ipsum, id aliquet
odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare magna, eu egestas arcu sapien vel dui. Proin ligula erat, vestibulum
malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non vestibulum pellentesque. </p>
</div>
</section>有趣的“奖金问题”
当部分结束时，我可以在最后使用一些动画，因为左边的内容直接消失了吗？
因为这是一个“额外的问题”......而且有点复杂，我只会在CodePen上发布它。
快速解释：您必须确保动画只触发一次。所以我使用了一个类，它将立即被删除......而只会在动画结束时position更改为。static
此外，只有当滚动位于行的底部时，动画才会有趣......顶部看起来很奇怪。
推荐阅读
- linux - 如何以其他用户身份运行 systemd 服务脚本
- swift - 如何在 Swift 中将特定格式的字符串转换为日期？
- c# - 为什么 VS Studio Code 中的终端使用了错误的程序？
- java - 基于 Java 的简单规则引擎，具有后备功能
- angular - Angular 9 Reactive Form - 删除最后一个控件并在表单上有效
- javascript - Discord.js 播放声音离开并在 x 次后加入并执行相同操作
- python - 使用 os.path.exists 和 assert 检查除了定义的列表之外是否存在其他文件夹
- javascript - 如何倒计时？| X天，X小时过去了
- c# - 字符串中可空枚举的扩展方法
- apache-flink - Kinesis Data Analytics Flink：不断增加的检查点大小