I am struggling with a CSS issue
div.borderYtoX a:before,
div.borderYtoX a:after {
position: absolute;
opacity: 0.5;
height: 100%;
width: 2px;
content: '';
background: #FFF;
transition: all 0.3s;
}
I'm trying to dynamically change the background color when scrolling down, but it seems to be affecting my navigation menus as well. I have included some jQuery code below that I thought would work, but it's not functioning as expected. Is there another solution that could help me achieve this?
$(document).ready(function(){
var scroll_start = 0;
var startchange = $('#startchange');
var offset = startchange.offset();
$(document).scroll(function() {
scroll_start = $(this).scrollTop();
if(scroll_start > offset.top) {
$('.header').css('background-color', 'rgb(255,255,255)');
$('div.container a').css('color', '#063193');
$('.borderYtoX a:before, .borderYtoX a:after').css('background', '#063193');
} else {
$('.header').css('background-color', 'rgba(255,255,255,0.3)');
$('div.container a').css('color', '#fff');
$('div.borderYtoX a:before, div.borderYtoX a:after').css('background', '#fff');
}
});
});