3

I have searched a lot for an answer to this and have found lots of similar issues but haven't managed to find a solution that works for me. I'm probably just missing something very obvious.

I have a fixed transparent nav bar that is 40px from the top.

What the problem is and what I want to achieve:

I have parallax scrolling and the nav bar looks great with the transparent element over the images, however it looks awful when scrolling past text.

I would like to hide only the text which conflicts with the nav bar in the three sections that contain text .About, .Portfolio and .Contact, or only the bit that is behind the nav bar.

I have just found this solution which sort of solves the problem, but I think still looks a bit clunky. 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");
      }
    });
  });
});

Perhaps if there is a way to include a fadeOut or select the text line by line. This looks especially bad at lower resolutions when the text stacks up into more lines, and it all disappears at once leaving a larger white space.

Here is the nav Html:

    <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>

And here is the relevant bits of CSS:

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*/
nav > ul  { padding-left: 0px; margin-left: -10px; }    
nav > ul > li { float: left; }
nav > ul > li > a { width: auto; padding: 10px 20px 14px 20px; }

I have just tried this:

$(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);
      }
    });
  });
});

but it doesn't seem to work at all.

What would be really nice is if only the text content became invisible or hidden etc at exactly 40px from the top, so that only the part of the text that is above the 40px is hidden but anything left below 40px is still visible.

video of how it looks at present with JS solution: https://vimeo.com/148953772

Here you can see the overlap:overlapping text

The Z-index solution would work normally, but at the moment it wont for my site as the images are set as background and the sections containing the content scroll over the top (parallax scrolling) of this so I would not be able to z-index the text behind the image. Maybe a responsive div that only activates at a certain point could get around this?

Community
  • 1
  • 1
charliesd
  • 123
  • 1
  • 1
  • 13
  • Can you give an example, or video, or code, or anything to help us visualize and see what you are working with? – S.Kiers Dec 14 '15 at 22:44
  • 1
    You could try to play with `z-index`. Make a div fixed with a solid `background` that has bigger `z-index` than your text but less than your images. – Gonzalo Dec 15 '15 at 00:13
  • I am not sure this would work. I currently have images set as backround images with text in sections which scrolls above this. As an example my text is within `

    ` or `

    ` and my images are set as background images within css. So to set all the appropriate z indexs the parallax scrolling would no longer work, unless there is a way around this?

     – charliesd Dec 15 '15 at 00:48
  • @S.Kiers would you like any more information? – charliesd Dec 15 '15 at 10:52
  • Sorry, went to bed. Is your site live? Can we look at the actual working/broken project? – S.Kiers Dec 15 '15 at 15:24
  • Unfortunately no, not yet. Waiting until I am happy with it, still trying to iron out all the kinks. – charliesd Dec 15 '15 at 15:27

1 Answers1

1

Thanks to @Gonzaldo. I created a 'hidden' div element behind the nav bar to obscure the text with the appropriate z-index numbers. It took a little while for me to figure out the order and numbers but got there in the end and it looks great.

solution diagram

charliesd
  • 123
  • 1
  • 1
  • 13