Hello, I am facing a challenge that my novice mind is struggling to overcome. Utilizing Bootstrap 4 navbar and some jquery, I managed to create a transition where an initially invisible navbar transforms into a solid color when the user scrolls beyond a certain point. Despite searching for solutions, I haven't been able to find one. Here is my scroll code:
navScroll(){
$(document).ready(function() {
$(window).scroll(function(){
if($(document).scrollTop() > 500) {
$('.navbar').addClass('solid');
$('.nav-link').addClass('black');
$('.navbar-brand').addClass('black');
}
else{
$('.navbar').removeClass('solid');
$('.nav-link').removeClass('black');
$('.navbar-brand').removeClass('black');
}
});
});
}
My goal was to have the navbar turn solid white once the window width exceeds 700 pixels, maintaining this appearance while scrolling up and down. The JQ scroll code should only kick in when the window size drops below 700 pixels:
navWidth(){
$(document).ready(function() {
$(window).resize(function() {
if($(document).width() < 700){
$('.navbar').addClass('solid');
$('.nav-link').addClass('black');
$('.navbar-brand').addClass('black');
}
})
})
}
However, I hit a roadblock here: Although I understand the need for a conditional statement, figuring out the next step has me stuck. Here's something I attempted, which had partial success but didn't fully work:
navCheck(){
$(document).ready(function() {
if($(document).width() < 700){
$(window).resize(function(){
$('.navbar').addClass('solid');
$('.nav-link').addClass('black');
$('.navbar-brand').addClass('black');
})
}
else if($(document).scrollTop() > 500) {
$(window).scroll(function(){
$('.navbar').addClass('solid');
$('.nav-link').addClass('black');
$('.navbar-brand').addClass('black');
})
}
else{
$('.navbar').removeClass('solid');
$('.nav-link').removeClass('black');
$('.navbar-brand').removeClass('black');
}
})
}