Member Avatar for allifields

Hi, so I have developed a top fixed navigation bar at the top of a webpage. How do I incorporate a fading navigation bar so that when I scroll down, the fixed bar turns from black to a certain opacity level? Is that something incorporating jquery? And if possible, if I hover over the bar, can it turn back to black?

An example would be like this http://tympanus.net/Tutorials/FixedFadeOutMenu/ but I believe he uses background images? And I am also kind of talking about what the Daniweb's navigation bar is doing, except my navigation is fixed at the top in the beginning.

Here is my code.

HTML

<div class="nav">
 <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About Me</a></li>
    <li><a href="#work">Work</a></li>
    <li><a href="#courses">Courses</a></li>
 </ul>
</div>

CSS

.nav
{
    background-color: #000000;
    text-align: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 10000;
    cursor: default;
    font-family: Helvetica, sans-serif;
}

.nav ul
{
    margin: 0;
}

.nav li
{
    display: inline-block;
    line-height: 1.5px;
    margin: 20px 40px 20px 40px;
}

.nav a
{
    position: relative;
    display: block;
    color: #fff;
    text-decoration: none;
    outline: 0;
    font-size: 18px;
}`

Can anyone help me out here? Thank you in advance!

  • 2 Contributors
  • 3 Replies
  • 999 Views
  • 3 Hours Discussion Span
  • Latest Post Latest Post by Dani

Dani AI

Generated

Small, practical add-on to the thread: 's markup and 's jQuery class-toggle are a solid base. Two changes make the fade look and behave better: animate the nav's background color using an alpha channel (rgba) instead of the CSS opacity property (opacity fades children like the links), and drive the fade with a throttled/requestAnimationFrame scroll handler so frame rate and battery life stay friendly. Add a CSS transition so hover or keyboard focus immediately restores full background.

/* keep text fully opaque and animate only the background */
.nav {
  background-color: rgba(0,0,0,1);
  transition: background-color 200ms ease;
}

/* hover/focus-within returns the bar to solid black */
.nav:hover,
.nav:focus-within {
  background-color: rgba(0,0,0,1);
}
(function(){
  var nav = document.querySelector('.nav');
  var lastY = 0, ticking = false;

  function clamp(v,a,b){ return Math.max(a, Math.min(b, v)); }

  function onScroll(){
    lastY = window.scrollY || window.pageYOffset;
    if(!ticking){
      window.requestAnimationFrame(update);
      ticking = true;
    }
  }

  function update(){
    var alpha = clamp(1 - (lastY / 400), 0.5, 1); // tune 0.5..1
    nav.style.backgroundColor = 'rgba(0,0,0,' + alpha + ')';
    ticking = false;
  }

  window.addEventListener('scroll', onScroll, {passive:true});
  update();
})();

Notes and troubleshooting: honor prefers-reduced-motion (disable transitions and the JS animation for users who need reduced motion); test the semi-transparent nav over different page content to maintain WCAG contrast; on small screens prefer position: sticky or disable the fade to avoid accidental overlays; keep the page from jumping when the header becomes fixed (use a placeholder or a margin-top strategy like suggested).

Recommended Answers

All 3 Replies

Member Avatar for Dani

So you mean like what we do on this page?: http://www.daniweb.com/web-development/web-design-html-and-css/15

You need to use jQuery, yes. Here's our code. You will need to modify it for your own needs:

<script type="text/javascript">
<!--
$(function() {
    var header = $('#static-header');
    var body = $('#body');
    var offset = header.offset().top;
    $(window).scroll(function() {
        var new_position = $(this).scrollTop(); 
        if (new_position > offset) {
            if (!(header.hasClass('fixed'))) { header.addClass('fixed'); }
            body.css('margin-top', header.height() + 'px');
        }
        else if (new_position <= header.height() + 30 && header.hasClass('fixed')) {
            if (header.hasClass('fixed')) { header.removeClass('fixed'); }
            body.css('margin-top', 'auto');
        }
    });
});
//-->
</script>

And then the CSS

div#static-header.fixed
{
    position: fixed;
    top: 0px;
    width: 100%;
    opacity: 0.90;
    ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
    z-index: 2;
}
Member Avatar for allifields

Definitely got the navigation bar going on now! Thank you so much!

Member Avatar for Dani

You're welcome :)

commented: :) +7
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.