jquery fade to after scrolling certain distance

Question

I have a personal website, www.derekgoss.com, that I'm working on (note that it is far from finished - still need content, responsiveness, etc.). When I scroll down and reach the first content box, I would like the navigation bar at the top to fadeTo(1000, .35), not fadeIn/Out. Likewise, once i scroll back up past the content box I would like the bar to fade back to its original opacity. Additionally, if the bar is faded out, I would like it to fade back to its original opacity when the user hovers their mouse over it, and go back once the mouse leaves. Something similar to this worked with the fadeOut/In methods, however once I tried to use the fadeTo methods it stopped working. I already set the opacity of the navigation bar to 1. Here is my best shot, but it isn't working:

  $(function(){
   var headertop = $("#aboutheader").offset().top;

   $(window).scroll(function(){
           if( $(window).scrollTop() > headertop ) {
                   $("#navigationbar").fadeTo(1000,.35);

                   $("#navigationbar").hover(
                   function() {
                   $("#navigationbar").fadeTo(500,1);
                   }, function() {
                   $("#navigationbar").fadeTo(1000,.35);
                   }
                   );
           } else {
                   $("#navigationbar").fadeTo(1000, 1);
           }
   }); 
});

Any help would be appreciated.

Answer 1

http://jsfiddle.net/y2gY8/

The problem with your code was, that it triggers the fades over and over again while scrolling and so they stack and fire one by one. My version works but could be a little bit optimized I guess.

$(function () {
    var headertop = $("#aboutheader").offset().top;
    var hoveractive = false;
    var fadeout = true;
    var fadein = true;

    $(window).scroll(function () {
        if ($(window).scrollTop() > headertop && fadeout) {
            hoveractive = true;
            fadeout = false;
            fadein = true;
            $("#navigationbar").fadeTo(1000, .35);
        }
        if ($(window).scrollTop() <= headertop && fadein) {
            hoveractive = false;
            fadein = false;
            fadeout = true;
            $("#navigationbar").fadeTo(1000, 1);
        }
    });

    $("#navigationbar").hover(function () {
        if (hoveractive) {
            $("#navigationbar").fadeTo(500, 1);
        }
    }, function () {
        if (hoveractive) {
            $("#navigationbar").fadeTo(500, .35);
        }
    });
});