一旦滚动过去就使div固定

Question

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

＆＃13;

＆＃13;

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();
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

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

对此可能的解决方案是添加一个不移动但与#job_cont具有相同位置的元素。这就是我在提供的代码片段中所做的。

检查 代码段中的<div id="scrollCheck"></div>。

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。