滚动过去后固定 div

Question

我制作了一个 jQuery 函数，它应该在滚动过去后将三个元素固定在导航栏下方。我已经让它有点工作，但有点小故障。当我滚动时，该功能不断在固定和静态之间切换。我做错了什么？

function scroll_past() {
   var jobs_cont = jQuery("#jobs_cont").outerHeight() / 2;
   var top_position = jQuery("#jobs_cont").offset().top;
   var position = jobs_cont + top_position;

   var nav_height = jQuery("#top_fluid_cont").height();
   var wind_pos = jQuery(window).scrollTop() + nav_height;

   if (wind_pos >= position) {
      jQuery(
         "#jobs_cont, .job_info, .job_title, .salary, .cv_button, .jobs_br, .jobs_space"
      ).addClass("fixed");
   } else {
      jQuery(
         "#jobs_cont, .job_info, .job_title, .salary, .cv_button, .jobs_br, .jobs_space"
      ).removeClass("fixed");
   }
}

jQuery(window).scroll(function(){
   scroll_past();
});

body{
   height: 5000px;
}

#top_fluid_cont{
   position: fixed;
   top: 0;
   width: 100%;
}

#nav{
   background-color: grey; 
}

#image{
	background-image: url(https://images.unsplash.com/photo-1507090960745-b32f65d3113a?dpr=1&auto=compress,format&fit=crop&w=2700&h=&q=80&cs=tinysrgb&crop=);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   height: 100vh;
}

#jobs_cont.fixed{
    margin-top: 0;
    position: fixed;
    top: 60px;
}

.job_info.fixed{
	height: 0;
	overflow: hidden;
}

.job_title.fixed{
	font-size: 1.4rem;
}

.salary.fixed{
	font-size: 1.4rem;
}

.cv_button.fixed{
	display: none;
}

.jobs_br.fixed{
	display: none;
}

.jobs_space.fixed{
	display: inline;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid" id="top_fluid_cont">
   <div class="row">
      <div class="col-xs-12" id="nav">
         <h1>Navigation</h1>
      </div>
   </div>
</div>

<div class="container-fluid">
	<div class="row">
		<div id="image">
			
		</div>
	</div>
</div>

<div class="container-fluid" id="jobs_cont">
   <div class="row">
      <div class="col-xs-12 col-sm-4">
         <div class="jobs">
            <h2 class="job_title">Construction Site<br class="jobs_br"><span class="jobs_space"> </span>Supervisor role</h2>
            <p class="salary">Salary: £20,000 – £22,000</p>
            <p class="job_info">Our client is a well-established and respected Building and Refurbishment company based in Leeds, are looking to add an experienced Construction Site Supervisor to their team. <a href="#">See More</a></p>
            <a href="#" class="red_button cv_button">SUBMIT CV</a>
         </div>
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-4">
         <div class="jobs">
            <h2 class="job_title">Construction Contracts<br class="jobs_br"><span class="jobs_space"> </span>Manager role</h2>
            <p class="salary">Salary: £40,000 – £45,000</p>
            <p class="job_info">Our client is a well-established and respected Building and Refurbishment company based in Leeds, are looking to add an experienced Construction Contracts Manager to their...<a href="#">See More</a></p>
            <a href="#" class="red_button cv_button">SUBMIT CV</a>
         </div>
      </div>

      <div class="col-xs-12 col-sm-4">
         <div class="jobs">
            <h2 class="job_title">Graduate Quantity<br class="jobs_br"><span class="jobs_space"> </span>Surveyor role</h2>
            <p class="salary">Salary: £20,000 – £22,000</p>
            <p class="job_info">Our client a well-established and respected Building and Refurbishment company based in Leeds, are looking to add a Graduate Quantity Surveyor to their team. <a href="#">See More</a></p>
            <a href="#" class="red_button cv_button">SUBMIT CV</a>
         </div>
      </div>
   </div>
</div>

https://codepen.io/Reece_Dev/pen/WZBrba

Answer 1

出现故障的原因是，通过将 fixed 类应用于 #job_cont，您将 #job_cont 向上移动，这会导致代码再次触发并删除该类。

一个可能的解决方案是添加一个元素，该元素不会移动，但与#job_cont 具有相同的位置。这就是我在提供的代码 sn-p 中所做的。

检查 <div id="scrollCheck"></div> 在 sn-p 中。

function scroll_past() {
   var jobs_cont = jQuery("#scrollCheck").outerHeight() / 2;
   var top_position = jQuery("#scrollCheck").offset().top;
   var position = jobs_cont + top_position;

   var nav_height = jQuery("#top_fluid_cont").height();
   var wind_pos = jQuery(window).scrollTop() + nav_height;

   if (wind_pos >= position) {
      jQuery(
         "#jobs_cont, .job_info, .job_title, .salary, .cv_button, .jobs_br, .jobs_space"
      ).addClass("fixed");
   } else {
      jQuery(
         "#jobs_cont, .job_info, .job_title, .salary, .cv_button, .jobs_br, .jobs_space"
      ).removeClass("fixed");
   }
}

jQuery(window).scroll(function(){
   scroll_past();
});

body{
   height: 5000px;
}

#top_fluid_cont{
   position: fixed;
   top: 0;
   width: 100%;
}

#nav{
   background-color: grey; 
}

#image{
	background-image: url(https://images.unsplash.com/photo-1507090960745-b32f65d3113a?dpr=1&auto=compress,format&fit=crop&w=2700&h=&q=80&cs=tinysrgb&crop=);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   height: 100vh;
}

#jobs_cont.fixed{
    margin-top: 0;
    position: fixed;
    top: 60px;
}

.job_info.fixed{
	height: 0;
	overflow: hidden;
}

.job_title.fixed{
	font-size: 1.4rem;
}

.salary.fixed{
	font-size: 1.4rem;
}

.cv_button.fixed{
	display: none;
}

.jobs_br.fixed{
	display: none;
}

.jobs_space.fixed{
	display: inline;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid" id="top_fluid_cont">
   <div class="row">
      <div class="col-xs-12" id="nav">
         <h1>Navigation</h1>
      </div>
   </div>
</div>

<div class="container-fluid">
	<div class="row">
		<div id="image">
			
		</div>
	</div>
</div>

<div class="container-fluid" id="jobs_cont">
   <div class="row">
      <div class="col-xs-12 col-sm-4">
         <div class="jobs">
            <h2 class="job_title">Construction Site<br class="jobs_br"><span class="jobs_space"> </span>Supervisor role</h2>
            <p class="salary">Salary: £20,000 – £22,000</p>
            <p class="job_info">Our client is a well-established and respected Building and Refurbishment company based in Leeds, are looking to add an experienced Construction Site Supervisor to their team. <a href="#">See More</a></p>
            <a href="#" class="red_button cv_button">SUBMIT CV</a>
         </div>
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-4">
         <div class="jobs">
            <h2 class="job_title">Construction Contracts<br class="jobs_br"><span class="jobs_space"> </span>Manager role</h2>
            <p class="salary">Salary: £40,000 – £45,000</p>
            <p class="job_info">Our client is a well-established and respected Building and Refurbishment company based in Leeds, are looking to add an experienced Construction Contracts Manager to their...<a href="#">See More</a></p>
            <a href="#" class="red_button cv_button">SUBMIT CV</a>
         </div>
      </div>

      <div class="col-xs-12 col-sm-4">
         <div class="jobs">
            <h2 class="job_title">Graduate Quantity<br class="jobs_br"><span class="jobs_space"> </span>Surveyor role</h2>
            <p class="salary">Salary: £20,000 – £22,000</p>
            <p class="job_info">Our client a well-established and respected Building and Refurbishment company based in Leeds, are looking to add a Graduate Quantity Surveyor to their team. <a href="#">See More</a></p>
            <a href="#" class="red_button cv_button">SUBMIT CV</a>
         </div>
      </div>
   </div>
</div>
         <div id="scrollCheck"></div>

Answer 2

你不需要 jQuery，你可以简单地使用position: sticky。