我有一些JQuery在我的过滤器栏中淡出，并在内容中添加填充以补偿用户是否滚过#contentPageSection div。
如果过滤条被隐藏，它应该删除填充，但在滚动时，不断添加填充。不知道怎么解决这个问题。
这是我的问题视频：
HTML：
<div id="column2">
<div style="background-image: url("/media/1122/caroline-g_wide.jpg?alpha=50"); height: 983px;" class="fullSizeImage smoothScrolling" id="landingImage">
<div style="position: relative;">
<div id="scrollingArrows" style="top: 923px;"> <a href="#contentPageSection">
<div class="arrow arrowHidden"></div>
<div class="arrow"></div>
</a> </div>
</div>
<div class="middleAlignedContainer">
<h1>Careers</h1>
<p></p>
</div>
</div>
<div style="background-image: url(/media/1122/caroline-g_wide.jpg?alpha=50)" class="fullSizeImage smoothScrolling " id="smallTitleImage"> <a href="#landingImage">
<h2>Careers</h2>
</a> </div>
<div id="contentPageSection">
<div class="row contentGrid" id="careers" style="height: 938px;">
<div class="col-lg-12 col-md-12 col-sm-12">
<ul id="jobList">
<li class="job jobRow row">
<div class="col-sm-offset-1">
<div class="jobTitle nameColumn"> <a title="Read more" href="/en/careers/canada/solar-project-manager/">
<h3>Solar Project Manager</h3>
</a> </div>
<div id="tags">
<div class="tag typeofRoleColumn"> <a onclick="OnlyShowJobsWith('Construction'); return false;" href="#" title="Only show jobs on Construction">Construction</a>
<p title="Remove jobs on Construction" data-role="remove" class="mdi-content-clear right"> <span onclick="HideJobsWith('Construction');">X</span> </p>
</div>
<div class="tag locationColumn"> <a onclick="OnlyShowJobsWith('Canada'); return false;" href="#" title="Only show jobs in Canada">Canada</a>
<p title="Remove jobs in Canada" data-role="remove" class="mdi-content-clear right"> <span onclick="HideJobsWith('Canada');">X</span> </p>
</div>
<div class="tag contractTypeColumn"> <a onclick="OnlyShowJobsWith('Full-Time'); return false;" href="#" title="Only show Full-Time jobs">Full-Time</a>
<p title="Remove Full-Time jobs" data-role="remove" class="mdi-content-clear right"> <span onclick="HideJobsWith('Full-Time');">X</span> </p>
</div>
<div style="clear:both;"></div>
</div>
</div>
<div class="col-sm-offset-1"> <a title="Read more" href="/en/careers/canada/solar-project-manager/">
<p><strong>Description</strong>: The Solar Project Manager will manage Wind farm/Solar farm construction projects in Ontario Canada.</p>
<p> </p>
<p><strong>Responsibilities:</strong></p>
<ol>
<li>Client satisfaction, budget control, profitability, contract compliance, problem resolution and project personnel management</li>
<li>Organize, execute and coordinate wor…</li>
</ol>
</a> </div>
</li>
<li class="job jobRow row">
<div class="col-sm-offset-1">
<div class="jobTitle nameColumn"> <a title="Read more" href="/en/careers/canada/site-civil-inspector/">
<h3>Site Civil Inspector</h3>
</a> </div>
<div id="tags">
<div class="tag typeofRoleColumn"> <a onclick="OnlyShowJobsWith('Construction'); return false;" href="#" title="Only show jobs on Construction">Construction</a>
<p title="Remove jobs on Construction" data-role="remove" class="mdi-content-clear right"> <span onclick="HideJobsWith('Construction');">X</span> </p>
</div>
<div class="tag locationColumn"> <a onclick="OnlyShowJobsWith('Canada'); return false;" href="#" title="Only show jobs in Canada">Canada</a>
<p title="Remove jobs in Canada" data-role="remove" class="mdi-content-clear right"> <span onclick="HideJobsWith('Canada');">X</span> </p>
</div>
<div class="tag contractTypeColumn"> <a onclick="OnlyShowJobsWith('Full-Time'); return false;" href="#" title="Only show Full-Time jobs">Full-Time</a>
<p title="Remove Full-Time jobs" data-role="remove" class="mdi-content-clear right"> <span onclick="HideJobsWith('Full-Time');">X</span> </p>
</div>
<div style="clear:both;"></div>
</div>
</div>
<div class="col-sm-offset-1"> <a title="Read more" href="/en/careers/canada/site-civil-inspector/">
<p><strong>Description:</strong></p>
<p>Carry out site civil inspections to support the project and client. Control the civil subcontractors and suppliers to ensure they meet contractual requirements. The role is instrumental in delivering on time cost effective projects.</p>
<p> </p>
<p><strong>Responsibilities:</strong></p>
<ol>
<li>Inspect all civil work in a …</li>
</ol>
</a> </div>
</li>
<li class="job jobRow row">
<div class="col-sm-offset-1">
<div class="jobTitle nameColumn">
<div class="col-sm-offset-1">
<div class="jobTitle nameColumn"> <a title="Read more" href="/en/careers/united-states/solar-manager-electrical-i-ii/">
<h3>Solar Manager - Electrical I & II</h3>
</a> </div>
<div id="tags">
<div class="tag typeofRoleColumn"> <a onclick="OnlyShowJobsWith('Construction'); return false;" href="#" title="Only show jobs on Construction">Construction</a>
<p title="Remove jobs on Construction" data-role="remove" class="mdi-content-clear right"> <span onclick="HideJobsWith('Construction');">X</span> </p>
</div>
<div class="tag locationColumn"> <a onclick="OnlyShowJobsWith('USA'); return false;" href="#" title="Only show jobs in USA">USA</a>
<p title="Remove jobs in USA" data-role="remove" class="mdi-content-clear right"> <span onclick="HideJobsWith('USA');">X</span> </p>
</div>
<div class="tag contractTypeColumn"> <a onclick="OnlyShowJobsWith('Full-Time'); return false;" href="#" title="Only show Full-Time jobs">Full-Time</a>
<p title="Remove Full-Time jobs" data-role="remove" class="mdi-content-clear right"> <span onclick="HideJobsWith('Full-Time');">X</span> </p>
</div>
<div style="clear:both;"></div>
</div>
</div>
<div class="col-sm-offset-1"> <a title="Read more" href="/en/careers/united-states/solar-manager-electrical-i-ii/">
<p>Summary:</p>
<p>Manage the daily activities of the electrical construction on a large scale wind, solar, transmission, battery storage project sites.</p>
<p>Specific duties:</p>
<ul>
<li>Leadership Accountabilities: Identify, deploy, and manage a high-performing team needed to accomplish business objectives. Provide a p…</li>
</ul>
</a> </div>
</div>
</div>
</li>
</ul>
</div>
<div class="filter">
<div class="showSideBar careers_filter" id="filter_overlay" style="">
<div id="toggleSidebar"><span class="filterHideButton rightArrow"></span></div>
<div data-mcs-theme="light-thick" class="mCustomScrollbar _mCS_2 mCS_no_scrollbar" id="filters">
<div class="mCustomScrollBox mCS-light-thick mCSB_vertical mCSB_inside" id="mCSB_2" style="max-height: 10494px;" tabindex="0">
<div dir="ltr" style="position:relative; top:0; left:0;" class="mCSB_container mCS_y_hidden mCS_no_scrollbar_y" id="mCSB_2_container">
<div class="filtertype" id="location">
<!-- Location List -->
<div class="slideTitle">
<h3>Location</h3>
<span class="filterTitleArrow downArrow"></span></div>
<div class="slideDetails">
<ul>
<span class="checkallcareers" onclick="toggleAll('#location', checked);"><img src="/images/selectAll.png" class="mCS_img_loaded">Toggle All</span>
<li>
<input type="checkbox" value="Australia" id="Australia" name="checkbox" checked="" class="css-checkbox" onchange="ShowJobsWith('Australia', 'locationColumn');">
<label class="css-label" for="Australia">Australia (0)</label>
</li>
<li>
<input type="checkbox" value="Canada" id="Canada" name="checkbox" checked="" class="css-checkbox" onchange="ShowJobsWith('Canada', 'locationColumn');">
<label class="css-label" for="Canada">Canada (6)</label>
</li>
<li>
<input type="checkbox" value="Chile" id="Chile" name="checkbox" checked="" class="css-checkbox" onchange="ShowJobsWith('Chile', 'locationColumn');">
<label class="css-label" for="Chile">Chile (0)</label>
</li>
<li>
<input type="checkbox" value="France" id="France" name="checkbox" checked="" class="css-checkbox" onchange="ShowJobsWith('France', 'locationColumn');">
<label class="css-label" for="France">France (0)</label>
</li>
<li>
<input type="checkbox" value="Germany" id="Germany" name="checkbox" checked="" class="css-checkbox" onchange="ShowJobsWith('Germany', 'locationColumn');">
<label class="css-label" for="Germany">Germany (0)</label>
</li>
<li>
<input type="checkbox" value="Japan" id="Japan" name="checkbox" checked="" class="css-checkbox" onchange="ShowJobsWith('Japan', 'locationColumn');">
<label class="css-label" for="Japan">Japan (0)</label>
</li>
<li>
<input type="checkbox" value="Sweden" id="Sweden" name="checkbox" checked="" class="css-checkbox" onchange="ShowJobsWith('Sweden', 'locationColumn');">
<label class="css-label" for="Sweden">Sweden (0)</label>
</li>
<li>
<input type="checkbox" value="Turkey" id="Turkey" name="checkbox" checked="" class="css-checkbox" onchange="ShowJobsWith('Turkey', 'locationColumn');">
<label class="css-label" for="Turkey">Turkey (0)</label>
</li>
<li>
<input type="checkbox" value="UK" id="UK" name="checkbox" checked="" class="css-checkbox" onchange="ShowJobsWith('UK', 'locationColumn');">
<label class="css-label" for="UK">UK (0)</label>
</li>
<li>
<input type="checkbox" value="USA" id="USA" name="checkbox" checked="" class="css-checkbox" onchange="ShowJobsWith('USA', 'locationColumn');">
<label class="css-label" for="USA">USA (37)</label>
</li>
</ul>
</div>
</div>
<div class="filtertype" id="contractType">
<!-- Contract Type List -->
<div class="slideTitle">
<h3>Contract Type</h3>
<span class="filterTitleArrow rightArrow"></span></div>
<div class="slideDetails">
<ul>
<span class="checkallcareers" onclick="toggleAll('#contractType');"><img src="/images/selectAll.png" class="mCS_img_loaded">Toggle All</span>
<li>
<input type="checkbox" value="Consultant" id="Consultant" name="checkbox" checked="" class="css-checkbox" onchange="ShowJobsWith('Consultant', 'contractTypeColumn');">
<label class="css-label" for="Consultant">Consultant (0)</label>
</li>
<li>
<input type="checkbox" value="Contract" id="Contract" name="checkbox" checked="" class="css-checkbox" onchange="ShowJobsWith('Contract', 'contractTypeColumn');">
<label class="css-label" for="Contract">Contract (0)</label>
</li>
<li>
<input type="checkbox" value="Full-Time" id="Full-Time" name="checkbox" checked="" class="css-checkbox" onchange="ShowJobsWith('Full-Time', 'contractTypeColumn');">
<label class="css-label" for="Full-Time">Full-Time (42)</label>
</li>
<li>
<input type="checkbox" value="Part-Time" id="Part-Time" name="checkbox" checked="" class="css-checkbox" onchange="ShowJobsWith('Part-Time', 'contractTypeColumn');">
<label class="css-label" for="Part-Time">Part-Time (1)</label>
</li>
<li>
<input type="checkbox" value="Permanent" id="Permanent" name="checkbox" checked="" class="css-checkbox" onchange="ShowJobsWith('Permanent', 'contractTypeColumn');">
<label class="css-label" for="Permanent">Permanent (0)</label>
</li>
</ul>
</div>
</div>
<div class="filtertype" id="typeOfRole">
<!-- Type of Role List -->
<div class="slideTitle">
<h3>Type of Role</h3>
<span class="filterTitleArrow rightArrow"></span></div>
<div class="slideDetails">
<ul>
<span class="checkallcareers" onclick="toggleAll('#typeOfRole');"><img src="/images/selectAll.png" class="mCS_img_loaded">Toggle All</span>
<li>
<input type="checkbox" value="Asset Management" id="AssetManagement" name="checkbox" checked="" class="css-checkbox" onchange="ShowJobsWith('Asset Management','typeofRoleColumn');">
<label class="css-label" for="AssetManagement">Asset Management (0)</label>
</li>
<li>
<input type="checkbox" value="Construction" id="Construction" name="checkbox" checked="" class="css-checkbox" onchange="ShowJobsWith('Construction','typeofRoleColumn');">
<label class="css-label" for="Construction">Construction (21)</label>
</li>
<li>
<input type="checkbox" value="Development" id="Development" name="checkbox" checked="" class="css-checkbox" onchange="ShowJobsWith('Development','typeofRoleColumn');">
<label class="css-label" for="Development">Development (3)</label>
</li>
<li>
<input type="checkbox" value="Engineering" id="Engineering" name="checkbox" checked="" class="css-checkbox" onchange="ShowJobsWith('Engineering','typeofRoleColumn');">
<label class="css-label" for="Engineering">Engineering (7)</label>
</li>
<li>
<input type="checkbox" value="Finance" id="Finance" name="checkbox" checked="" class="css-checkbox" onchange="ShowJobsWith('Finance','typeofRoleColumn');">
<label class="css-label" for="Finance">Finance (1)</label>
</li>
<li>
<input type="checkbox" value="Generation" id="Generation" name="checkbox" checked="" class="css-checkbox" onchange="ShowJobsWith('Generation','typeofRoleColumn');">
<label class="css-label" for="Generation">Generation (0)</label>
</li>
<li>
<input type="checkbox" value="Health & Safety" id="HealthSafety" name="checkbox" checked="" class="css-checkbox" onchange="ShowJobsWith('Health & Safety','typeofRoleColumn');">
<label class="css-label" for="HealthSafety">Health & Safety (2)</label>
</li>
<li>
<input type="checkbox" value="Human Resources" id="HumanResources" name="checkbox" checked="" class="css-checkbox" onchange="ShowJobsWith('Human Resources','typeofRoleColumn');">
<label class="css-label" for="HumanResources">Human Resources (0)</label>
</li>
<li>
<input type="checkbox" value="IT" id="IT" name="checkbox" checked="" class="css-checkbox" onchange="ShowJobsWith('IT','typeofRoleColumn');">
<label class="css-label" for="IT">IT (0)</label>
</li>
<li>
<input type="checkbox" value="Marketing" id="Marketing" name="checkbox" checked="" class="css-checkbox" onchange="ShowJobsWith('Marketing','typeofRoleColumn');">
<label class="css-label" for="Marketing">Marketing (0)</label>
</li>
<li>
<input type="checkbox" value="Offshore" id="Offshore" name="checkbox" checked="" class="css-checkbox" onchange="ShowJobsWith('Offshore','typeofRoleColumn');">
<label class="css-label" for="Offshore">Offshore (0)</label>
</li>
<li>
<input type="checkbox" value="Onshore" id="Onshore" name="checkbox" checked="" class="css-checkbox" onchange="ShowJobsWith('Onshore','typeofRoleColumn');">
<label class="css-label" for="Onshore">Onshore (0)</label>
</li>
<li>
<input type="checkbox" value="Operations" id="Operations" name="checkbox" checked="" class="css-checkbox" onchange="ShowJobsWith('Operations','typeofRoleColumn');">
<label class="css-label" for="Operations">Operations (2)</label>
</li>
<li>
<input type="checkbox" value="Procurement" id="Procurement" name="checkbox" checked="" class="css-checkbox" onchange="ShowJobsWith('Procurement','typeofRoleColumn');">
<label class="css-label" for="Procurement">Procurement (0)</label>
</li>
<li>
<input type="checkbox" value="Project Delivery" id="ProjectDelivery" name="checkbox" checked="" class="css-checkbox" onchange="ShowJobsWith('Project Delivery','typeofRoleColumn');">
<label class="css-label" for="ProjectDelivery">Project Delivery (4)</label>
</li>
<li>
<input type="checkbox" value="Software" id="Software" name="checkbox" checked="" class="css-checkbox" onchange="ShowJobsWith('Software','typeofRoleColumn');">
<label class="css-label" for="Software">Software (0)</label>
</li>
<li>
<input type="checkbox" value="Solar" id="Solar" name="checkbox" checked="" class="css-checkbox" onchange="ShowJobsWith('Solar','typeofRoleColumn');">
<label class="css-label" for="Solar">Solar (0)</label>
</li>
<li>
<input type="checkbox" value="Storage" id="Storage" name="checkbox" checked="" class="css-checkbox" onchange="ShowJobsWith('Storage','typeofRoleColumn');">
<label class="css-label" for="Storage">Storage (0)</label>
</li>
<li>
<input type="checkbox" value="Strategy" id="Strategy" name="checkbox" checked="" class="css-checkbox" onchange="ShowJobsWith('Strategy','typeofRoleColumn');">
<label class="css-label" for="Strategy">Strategy (0)</label>
</li>
<li>
<input type="checkbox" value="Technical" id="Technical" name="checkbox" checked="" class="css-checkbox" onchange="ShowJobsWith('Technical','typeofRoleColumn');">
<label class="css-label" for="Technical">Technical (3)</label>
</li>
</ul>
</div>
</div>
</div>
<div class="mCSB_scrollTools mCSB_2_scrollbar mCS-light-thick mCSB_scrollTools_vertical" id="mCSB_2_scrollbar_vertical" style="display: none;">
<div class="mCSB_draggerContainer">
<div oncontextmenu="return false;" style="position: absolute; min-height: 30px; top: 0px;" class="mCSB_dragger" id="mCSB_2_dragger_vertical">
<div class="mCSB_dragger_bar" style="line-height: 30px;"></div>
</div>
<div class="mCSB_draggerRail"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="left">
<div id="facebook" class="socialLink"> <img src="/images/icons/facebook.gif">
<ul class="footerCountriesList">
<a href="https://www.facebook.com/RESamericas" target="_blank">
<li> <img src="/images/flags/usa.png"> <span>Americas</span> </li>
</a> <a href="https://www.facebook/RES_France" target="_blank">
<li> <img src="/images/flags/fr.png"> <span>France</span> </li>
</a> <a href="https://www.facebook.com/resltd" target="_blank">
<li> <img src="/images/flags/en.png"> <span>UK</span> </li>
</a>
</ul>
</div>
<div id="twitter" class="socialLink"> <img src="/images/icons/twitter.gif">
<ul class="footerCountriesList">
<a href="https://twitter.com/RES_Americas" target="_blank">
<li> <img src="/images/flags/usa.png"> <span>Americas</span> </li>
</a> <a href="https://twitter.com/RES_France" target="_blank">
<li> <img src="/images/flags/fr.png"> <span>France</span> </li>
</a> <a href="https://twitter.com/RESGroup" target="_blank">
<li> <img src="/images/flags/en.png"> <span>UK</span> </li>
</a>
</ul>
</div>
<div id="linkedin" class="socialLink"> <img src="/images/icons/linkedin.gif">
<ul class="footerCountriesList">
<a href="https://www.linkedin.com/company/res-americas" target="_blank">
<li> <img src="/images/flags/usa.png"> <span>Americas</span> </li>
</a> <a href="https://www.linkedin.com/company/RES_France" target="_blank">
<li> <img src="/images/flags/fr.png"> <span>France</span> </li>
</a> <a href="https://www.linkedin.com/company/res-group" target="_blank">
<li> <img src="/images/flags/en.png"> <span>UK</span> </li>
</a>
</ul>
</div>
<div id="youtube" class="socialLink"> <img src="/images/icons/youtube.gif">
<ul class="footerCountriesList">
<a href="https://www.youtube.com/user/RESAMERICASINC" target="_blank">
<li> <img src="/images/flags/usa.png"> <span>Americas</span> </li>
</a> <a href="https://www.youtube.com/user/RESGroupLtd" target="_blank">
<li> <img src="/images/flags/en.png"> <span>UK</span> </li>
</a>
</ul>
</div>
</div>
<div class="right">
<p>Copyright © 2015 Renewable Energy Systems Ltd. All rights reserved | <a href="/en/terms-of-use/">Terms of Use</a> | <a href="/en/privacy-policy/">Privacy Policy</a> | <a href="/en/cookies/">Cookies</a> | <a href="/en/sitemap">SiteMap</a></p>
</div>
</div>
</div>
</div>
这里是处理滚动的JQuery：
// Show filter bar when scrolled past the main image.
$(function(){
var scrollTimer = null;
$(window).scroll(function() {
var st = $(this).scrollTop();
var topOfTheDiv = $("#contentPageSection").offset().top;
if(st > topOfTheDiv) {
$('.careers_filter').css({position: 'fixed', top: '0px'});
$('.careers_filter').stop().fadeIn(150);
// add padding right to content when sidebar is shown - to avoid overlapping
$(".contentGrid:first-child").addClass('toggleFilterPadding');
}else{
$('.careers_filter').stop().fadeOut(150);
// remove padding right to content when sidebar is hidden
$(".contentGrid:first-child").removeClass('toggleFilterPadding');
}
}
if (scrollTimer) {
clearTimeout(scrollTimer); // clear any previous pending timer
}
scrollTimer = setTimeout(caughtScrollPosition, 100); // set new timer
updateNavigation();
});
})
这里是处理隐藏过滤条的JQuery：
// hide or show the sidebar
if($(window).width() <= 992) {
$("#filter_overlay").removeClass('showSideBar').addClass('hideSideBar');
$("#filter_overlay").children().children("span").removeClass('rightArrow').addClass('leftArrow');
}
$('.filterHideButton').on('click', function(){
$("#filter_overlay").toggleClass('showSideBar').toggleClass('hideSideBar');
$(".contentGrid:first-child").toggleClass('toggleFilterPadding');
$("#filter_overlay").children("#toggleSidebar").children("span").toggleClass('leftArrow').toggleClass('rightArrow');
});
});
答案 0 :(得分：1)
我相信它，因为一旦添加了填充，就不会停止添加填充。一旦你到达添加填充的位置，它将始终输入if if阻止每个滚动事件，直到st小于topOfTheDiv，然后向上滚动。你可以使用信号量来做这样的事情：
// Show filter bar when scrolled past the main image.
$(function(){
var scrollTimer = null;
var paddingAdded = false;
$(window).scroll(function() {
var st = $(this).scrollTop();
var topOfTheDiv = $("#contentPageSection").offset().top;
if(st > topOfTheDiv && !paddingAdded) {
$('.careers_filter').css({position: 'fixed', top: '0px'});
$('.careers_filter').stop().fadeIn(150);
// add padding right to content when sidebar is shown - to avoid overlapping
$(".contentGrid:first-child").addClass('toggleFilterPadding');
paddingAdded = true;
}
if(st <= topOfTheDiv && paddingAdded) {
$('.careers_filter').stop().fadeOut(150);
// remove padding right to content when sidebar is hidden
$(".contentGrid:first-child").removeClass('toggleFilterPadding');
paddingAdded = false;
}
} <-- extra bracket
if (scrollTimer) {
clearTimeout(scrollTimer); // clear any previous pending timer
}
scrollTimer = setTimeout(caughtScrollPosition, 100); // set new timer
updateNavigation();
});
})