Twitter Bootstrap Question posted in

Making a div fixed once scrolled past-Twitter bootstrap

I have made a jQuery function which is supposed to make three elements fixed beneath the nav bar once scrolled past. I have got it kinda working but theres kinda a glitch. The function is constantly flicking between fixed and static as I scroll. What have I done wrong?

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

Tags:

2

Answers


  1. 0

    The reason for the glitch is the fact that by applying the class fixed to #job_cont you’re moving #job_cont up, which causes the code to trigger again and remove the class.

    A possible solution to this would be to add an element, which doesn’t move, but has the same position as #job_cont. This is what I did in the provided code snippet.

    Check
    <div id="scrollCheck"></div> in the snippet.

    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>
    Login or Signup to reply.
  2. 0

    You don’t need jQuery for this, you can simply use position: sticky.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search