0
我有一些JQuery淡入我的過濾器欄，並添加填充內容，以補償用戶是否滾動過去#contentPageSection股利。JQuery FadeIn和添加類當滾動過去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');
});
});
你可以剪切和查看源代碼或通過瀏覽器檢查粘貼代碼？ – lharby
好點:)添加在HTML – Madness