修复了两个 div 元素之间的 div
Fixed div between two div elements
当滚动位置在两个 div 元素之间时,我尝试创建一个固定的 div 元素。我使用此代码创建固定元素:
var sidebar = $('.sidebar').offset().top;
$(window).scroll(function() {
if ($(window).scrollTop() > sidebar) {
$('.sidebar').addClass('fixed');
}else{
$('.sidebar').removeClass('fixed');
}
});
我不知道如何在蓝色div 到达时删除固定class。我试图获取蓝色 div 的当前位置并将其添加到 if 语句中:
var blueDiv = $('.bottom').offset().top
:
if ($(window).scrollTop() > sidebar && $(window).scrollTop() < blueDiv ){
// add fixed class
}else{
// remove fixed class
}
Fiddle: https://jsfiddle.net/L7p5yeet/
您在检查侧边栏是否已经达到蓝色时忘记包括侧边栏的高度div:
var sidebar = $('.sidebar').position().top;
var blueDiv = $('.bottom').position().top - $('.sidebar').innerHeight();
$(window).scroll(function() {
var sT = $(window).scrollTop();
if (sT > sidebar && sT < blueDiv) {
$('.sidebar').addClass('fixed');
}else{
$('.sidebar').removeClass('fixed');
}
});
var sidebar = $('.sidebar').offset().top;
var blueOffset = $('.bottom').offset().top;
var sidebarHeight = $('.sidebar').height();
// If you reached the blue div (bottom), remove the 'fixed' class. Because the fixed element may not scroll over the footer or blue div. If you scroll back to the top (before the blue div or between the sidebar and the blue div) the fixed class need to be added again.
$(window).scroll(function() {
if ($(window).scrollTop() > sidebar) {
$('.sidebar').addClass('fixed');
} else {
$('.sidebar').removeClass('fixed');
}
if ($(window).scrollTop() > blueOffset - sidebarHeight) {
$('.sidebar').removeClass('fixed');
}
});
body {
margin: 0;
padding: 0;
}
.fixed {
position: fixed;
width: inherit;
overflow: hidden;
background: red;
top: 0;
}
.topbar {
background: red;
height: 85px;
text-align: center;
line-height: 85px;
color: #fff;
}
.container {
width: 100%;
overflow: hidden;
}
.left {
float: left;
width: 75%;
background: gray;
height: 800px;
}
.right {
float: left;
width: 25%;
background: black;
color: #fff;
}
.bottom {
width: 100%;
background: blue;
overflow: hidden;
height: 200px;
line-height: 200px;
color: #fff;
text-align: center;
}
.footer {
height: 600px;
color: #000;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topbar">
<p>
A simple topbar
</p>
</div>
<div class="container">
<div class="left">
<p>
Start fixed element
</p>
</div>
<div class="right">
<div class="sidebar">
<ul>
<li>Menu item 1</li>
<li>Menu item 1</li>
</ul>
</div>
</div>
<div class="bottom">
<p>
Remove fixed element
</p>
</div>
</div>
<div class="footer">
<p>
A simple footer
</p>
</div>
当滚动位置在两个 div 元素之间时,我尝试创建一个固定的 div 元素。我使用此代码创建固定元素:
var sidebar = $('.sidebar').offset().top;
$(window).scroll(function() {
if ($(window).scrollTop() > sidebar) {
$('.sidebar').addClass('fixed');
}else{
$('.sidebar').removeClass('fixed');
}
});
我不知道如何在蓝色div 到达时删除固定class。我试图获取蓝色 div 的当前位置并将其添加到 if 语句中:
var blueDiv = $('.bottom').offset().top
:
if ($(window).scrollTop() > sidebar && $(window).scrollTop() < blueDiv ){
// add fixed class
}else{
// remove fixed class
}
Fiddle: https://jsfiddle.net/L7p5yeet/
您在检查侧边栏是否已经达到蓝色时忘记包括侧边栏的高度div:
var sidebar = $('.sidebar').position().top;
var blueDiv = $('.bottom').position().top - $('.sidebar').innerHeight();
$(window).scroll(function() {
var sT = $(window).scrollTop();
if (sT > sidebar && sT < blueDiv) {
$('.sidebar').addClass('fixed');
}else{
$('.sidebar').removeClass('fixed');
}
});
var sidebar = $('.sidebar').offset().top;
var blueOffset = $('.bottom').offset().top;
var sidebarHeight = $('.sidebar').height();
// If you reached the blue div (bottom), remove the 'fixed' class. Because the fixed element may not scroll over the footer or blue div. If you scroll back to the top (before the blue div or between the sidebar and the blue div) the fixed class need to be added again.
$(window).scroll(function() {
if ($(window).scrollTop() > sidebar) {
$('.sidebar').addClass('fixed');
} else {
$('.sidebar').removeClass('fixed');
}
if ($(window).scrollTop() > blueOffset - sidebarHeight) {
$('.sidebar').removeClass('fixed');
}
});
body {
margin: 0;
padding: 0;
}
.fixed {
position: fixed;
width: inherit;
overflow: hidden;
background: red;
top: 0;
}
.topbar {
background: red;
height: 85px;
text-align: center;
line-height: 85px;
color: #fff;
}
.container {
width: 100%;
overflow: hidden;
}
.left {
float: left;
width: 75%;
background: gray;
height: 800px;
}
.right {
float: left;
width: 25%;
background: black;
color: #fff;
}
.bottom {
width: 100%;
background: blue;
overflow: hidden;
height: 200px;
line-height: 200px;
color: #fff;
text-align: center;
}
.footer {
height: 600px;
color: #000;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topbar">
<p>
A simple topbar
</p>
</div>
<div class="container">
<div class="left">
<p>
Start fixed element
</p>
</div>
<div class="right">
<div class="sidebar">
<ul>
<li>Menu item 1</li>
<li>Menu item 1</li>
</ul>
</div>
</div>
<div class="bottom">
<p>
Remove fixed element
</p>
</div>
</div>
<div class="footer">
<p>
A simple footer
</p>
</div>