如果用户滚动经过 #contentPageSection div，我有一些 JQuery 会在我的过滤器栏中淡出并向内容添加填充以补偿。
如果过滤栏被隐藏，它应该移除填充，但在滚动时填充不断被添加。不确定如何解决这个问题。
这是我的问题的视频:
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');
});
});
最佳答案
我相信这是因为您不会在添加填充后停止添加填充。一旦你到达添加填充的点，它总是会进入 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();
});
})
fiddle :http://jsfiddle.net/o62Lchjm/
关于javascript - 滚动经过 div 时 JQuery FadeIn 和添加类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33611605/