2

我有一个个人网站www.derekgoss.com，我正在开发（请注意，它远未完成 - 仍需要内容、响应能力等）。当我向下滚动并到达第一个内容框时，我希望顶部的导航栏为fadeTo(1000, .35)，而不是 fadeIn/Out。同样，一旦我向上滚动回内容框，我希望栏淡化回其原始不透明度。此外，如果该栏淡出，我希望它在用户将鼠标悬停在其上时淡出至其原始不透明度，并在鼠标离开后返回。与此类似的方法适用于 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);
           }
   }); 
});

任何帮助，将不胜感激。

4

1 回答 1

2

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);
        }
    });
});
于 2014-05-13T17:49:25.820 回答