0
Ich habe eine jQuery-Funktion gemacht, die drei Elemente unter der Navigationsleiste behoben werden soll, sobald sie vorbei gescrollt. Ich habe es irgendwie funktioniert, aber es gibt einen Fehler. Die Funktion blättert ständig zwischen fest und statisch, während ich scrolle. Was habe ich falsch gemacht?Ich mache ein Div fix einmal gescrollt
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{
\t 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{
\t height: 0;
\t overflow: hidden;
}
.job_title.fixed{
\t font-size: 1.4rem;
}
.salary.fixed{
\t font-size: 1.4rem;
}
.cv_button.fixed{
\t display: none;
}
.jobs_br.fixed{
\t display: none;
}
.jobs_space.fixed{
\t 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">
\t <div class="row">
\t \t <div id="image">
\t \t \t
\t \t </div>
\t </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
Danke mate. Ich werde diese Antwort akzeptieren, da sie funktioniert. Obwohl ich beschlossen habe, meinen Code neu zu ordnen, um das gleiche Ergebnis zu erzielen. Aber das wäre nicht möglich gewesen, wenn Sie nicht auf das Problem hingewiesen hätten. – Reece
Ich bin froh, dass ich helfen konnte. :) – Maharkus