I am currently facing an issue with my sticky navigation bar. I want the background color to change to white after the user scrolls past the image slider. The problem is that the white background appears above the image slider instead of in the orange logo section where it should be. I have tried using a pixel offset in the jQuery event, but due to the responsive nature of my site, this approach is not effective across different browser sizes. Any suggestions on how to fix this would be greatly appreciated!
Thank you!
You can view the issue in action on the website I'm working on
Below is the jQuery code for changing the background color and where the ".getsticky" class is applied in the HTML:
$(document).ready(function(){
if ( $(window).width() > 769) {
var scroll_start = 0;
var startchange = $('.getsticky');
var offset = startchange.offset();
$(document).scroll(function() {
scroll_start = $(this).scrollTop() + 0;
// scroll_start = $(this).scrollTop();
if(scroll_start > offset.top) {
$('.main-nav').css('background-color','rgba(255,255,255,0.8)');
} else {
$('.main-nav').css('background-color', 'transparent');
}
});
}
});
<div id="work" class="grid twelve work">
<div class="container">
<div class="flexslider">
<ul class="slides">
<li>
<a href="#"><img src="img/work/photo1.jpg" /></a>
</li>
<li>
<img src="img/work/photo2.jpg" />
</li>
<li>
<img src="img/work/photo3.jpg" />
</li>
</ul>
</div>
</div>
</div>
<section class="grid work-logos getsticky">
<div class="container">
<div class="grid twelve">
<div>
<p>
Select clients from our collective experience.
</p>
</div>
</div>
<div class="grid twelve logoSquare">
<div class="grid threeDesktop threeTablet fourPhone six">
<img src="img/about/ibm_logo.svg" alt="IBM">
</div>
<div class="grid threeDesktop threeTablet fourPhone six">
<img src="img/about/google_logo.svg" alt="Google">
</div>
<div class="grid threeDesktop threeTablet fourPhone six">
<img src="img/about/aiga_logo.svg" alt="AIGA">
</div>
<div class="grid threeDesktop threeTablet fourPhone six">
<img src="img/about/obama_logo.svg" alt="Obama">
</div>
<div class="grid threeDesktop threeTablet fourPhone six">
<img src="img/about/espn_logo.svg" alt="ESPN">
</div>
<div class="grid threeDesktop threeTablet fourPhone six">
<img src="img/about/herman_logo.svg" alt="Herman">
</div>
<div class="grid threeDesktop threeTablet fourPhone six">
<img src="img/about/vaystays_logo.svg" alt="Vaystays">
</div>
<div class="grid threeDesktop threeTablet fourPhone six">
<img src="img/about/nd_logo.svg" alt="ND">
</div>
<div class="grid threeDesktop threeTablet fourPhone six">
<img src="img/about/sd_logo.svg" alt="SD">
</div>
<div class="grid threeDesktop threeTablet fourPhone six">
<img src="img/about/fuzzy_logo.svg" alt="Fuzzy">
</div>
<div class="grid threeDesktop threeTablet fourPhone six">
<img src="img/about/usaa_logo.svg" alt="USAA">
</div>
</div>
</div>
</section>