Question

我有一个我正在处理的个人网站www.derekgoss.com（请注意，它还远未完成 - 仍然需要内容，响应能力等）。当我向下滚动并到达第一个内容框时，我希望顶部的导航栏为 fadeTo（1000，.35），而不是淡入/淡出。同样，一旦我向上滚动回到内容框，我希望条形淡出回原来的不透明度。此外，如果条形淡出，我希望当用户将鼠标悬停在其上时，它会淡化回原来的不透明度，并在鼠标离开后返回。类似的东西与fadeOut / In方法一起使用，但是一旦我尝试使用fadeTo方法它停止工作。我已经将导航栏的不透明度设置为1。这是我最好的镜头，但它不起作用：

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

任何帮助将不胜感激。

Answer 1

http://jsfiddle.net/y2gY8/

您的代码存在的问题是，它会在滚动时反复触发淡入淡出，因此它们会逐个堆叠并触发。我的版本有效，但我想可以稍微优化一下。

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

滚动一定距离后jquery淡入淡出

1 个答案: