After extensive searching for a solution, I have encountered multiple similar issues but none have provided a resolution that works for my specific case. It seems I may be overlooking something obvious.
The problem at hand involves a fixed transparent navigation bar positioned 40px from the top.
My objective:
While the parallax scrolling effect looks great with the transparent element overlaying images, it presents an unappealing appearance when scrolling past text content.
I aim to selectively hide only the text that clashes with the navigation bar within the sections labeled .About, .Portfolio, and .Contact - particularly the portions obscured by the navigation bar.
Although I came across a solution that partially addresses the issue, I believe it still appears somewhat clumsy. Hide the content under transparent fixed navbar while scrolling down
$(document).ready(function() {
$(document).scroll(function() {
$(".About p, .Portfolio p, .Contact p, .About h3, .Portfolio h3, .Contact h3 ").each(function() {
if ($(this).offset().top <= $(document).scrollTop() + 5) {
$(this).css("opacity", "0");
} else {
$(this).css("opacity", "1");
}
});
});
});
To improve the situation, perhaps incorporating a fadeOut effect or selecting the text line by line could be more visually appealing. This issue is particularly prominent at lower resolutions when text wraps into multiple lines, causing it to disappear all at once and leaving a sizable white space.
Below is the HTML code for the navigation bar:
<nav>
<ul>
<li><a id="title" title="Charlie Day" href="#top" aria-haspopup="true">CHARLES DAY</a></li>
<li><a class="anchor" title="About" href="#About" aria-haspopup="true">About </a></li>
<li><a class="anchor" title="Portfolio" href="#Portfolio" aria-haspopup="true">Portfolio</a></li>
<li><a class="anchor" title="Contact" href="#Contact" aria-haspopup="true">Contact</a></li>
</ul>
</nav>
Here are the relevant CSS styles:
nav {
background-color: rgba(255,255,255,0.5);
position: fixed;
top: 0px; left: 0px;
width: 100%;
height: 40px;
z-index: 300;
font-size: 1.1em;
font-weight: 400;
}
nav::after { content: ''; display: block; clear: both; }
nav ul { list-style: none; margin: 0; padding: 0; }
nav ul li:hover {background-color: rgba(200,200,200,.5); }
nav ul li:hover > ul { display: block; }
nav ul li a {
display: inline-block;
color: black;
padding: 10px 20px;
text-decoration: none;
width: 125px;
position: relative;
}
a#title {font-weight: 700; }
/* Top-level navigation */
nav > ul { padding-left: 0px; margin-left: -10px; }
nav > ul > li { float: left; }
nav > ul > li > a { width: auto; padding: 10px 20px 14px 20px; }
A different approach I attempted:
$(document).ready(function() {
$(document).scroll(function() {
$(".About p, .Portfolio p, .Contact p, .About h3, .Portfolio h3, .Contact h3 ").each(function() {
if ($(this).offset().top <= $(document).scrollTop() + 6) {
$(this).fadeOut() }, 500);
} else {
$(this).fadeIn() }, 500);
}
});
});
Unfortunately, this method did not yield the desired results.
An ideal scenario would involve only the text content becoming invisible or hidden precisely at 40px from the top, so that only the portion above this threshold is concealed while the rest remains visible.
View a video demonstration of the current appearance with the JavaScript solution here:
To illustrate the overlap issue, refer to this image: overlapping text
While the Z-index solution typically resolves such conflicts, it does not apply to my website as the images are set as backgrounds and the content sections scroll over them due to parallax scrolling, making it impossible to apply Z-index to the text behind the images. Perhaps a responsive div that activates at a specific point could serve as a workaround?