I'm currently utilizing JQuery to make CSS adjustments on my website and encountering issues with some of the code. I am still new to using jQuery, but usually, I can troubleshoot when making changes - however, this particular issue has me stumped.
Below are fragments of my HTML, CSS, and JQuery. My goal is to underline a link on hover while also changing the background and link color when a user scrolls down the page. Everything works as expected except for figuring out how to make the underline appear when scrolling occurs.
Any assistance would be greatly appreciated. I understand that the solution is probably simple, but I'm unsure about what exactly needs to be changed in my JQuery code.
I intentionally omitted the non-working code from the snippet, but I suspect I need to include additional statements within the if statement in the JQuery section. I've been attempting to insert code there, but nothing seems to work.
Additionally, I almost forgot to mention that the current code underlines the link on hover (in the same color as the link). I want to replicate this behavior when the user scrolls down - if the link is typically blue with a white background, the hover underline should also be blue; after scrolling down, the background becomes blue and the link turns gold. I aim for the underline to be gold too.
Thank you,
$(window).scroll(function() {
// 100 = The point you would like to fade the nav in.
if ($(window).scrollTop() > 50) {
$('.bg').addClass('show');
$('nav li a').css('color', '#FFCF01');
} else {
$('.bg').removeClass('show');
$('nav li a').css('color', '#00529C');
};
});
$('.scroll').on('click', function(e) {
e.preventDefault()
$('html, body').animate({
scrollTop: $(this.hash).offset().top
}, 1000);
});nav {
margin: 0 auto;
max-width: 1024px;
}
.hdrmenu ul {
margin-right: 1em;
padding-top: 1.25em;
}
.hdrmenu li {
float: left;
list-style: none;
}
.hdrmenu li a {
text-align: center;
text-decoration: none;
padding: 0em 1em;
overflow: hidden;
color: #00529C;
}
.show {
background-color: #00529C;
color: #FFCF01;
width: 100%;
height: 6em;
opacity: 0.8;
}
.slide-left-right {
text-decoration: none;
display: inline-block;
color: #FFCF01;
/* yellow gold */
float: left;
}
/* add a empty string after the elment with class .slide-left-right */
.slide-left-right:after {
content: '';
display: block;
height: 2px;
width: 0;
background: transparent;
transition: width .7s ease, background-color .7s ease;
/* .5 seonds for changes to the width and background-color */
-webkit-transition: width .7s ease, background-color .7s ease;
/* Chrome and Safari */
-moz-transition: width .7s ease, background-color .7s ease;
/* FireFox */
}
/* Change the width and background on hover, aka sliding out */
.slide-left-right:hover:after {
width: 100%;
background: #00529C;
/* lc blue */
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="bg transition">
<nav class="hdrmenu">
<a href="index.html"><img src="_images/logo.gif" class="logo"></a>
<ul style="float: right;">
<li><a href="one.html" class="slide-left-right">Diabetes</a></li>
<li><a href="two.html" class="slide-left-right">Vision</a></li>
<li><a href="three.html" class="slide-left-right">Hunger</a></li>
<li><a href="four.html" class="slide-left-right">Environmental Issues</a></li>
<li><a href="five.html" class="slide-left-right">Childhood Cancer</a></li>
<li><a href="six.html" class="slide-left-right boldLi">We Serve</a></li>
</ul>
</nav>
</header>