0

我正在尝试使用 jQuery（新手）完成一项任务，除了一步之外，我几乎已经弄清楚了所有事情。我有一个在页面向下滚动 250 像素后淡出的徽标。我还有一个顶部导航，它可以向下滑动并将徽标向下推。如果它在页面下方超过 250 像素，则徽标的不透明度会重新出现，然后在关闭导航时消失。这一切都正常工作。

我的问题是当我在页面的前 250 像素内时。当我打开和关闭导航时，徽标在关闭导航时完全消失。我希望它根据页面前 250 像素的滚动位置返回到不透明度。

示例（必须在大于 768 像素的浏览器中查看）：http ://staging.michalekbrothersracing.com/

这是我正在使用的代码：

<!--LOGO FADE-->
$(document).ready(function(){
    $(document).scroll(function(){
        var top=$(this).scrollTop();
        if(top<250){
            var dif=1-top/250;
            $(".logo").css({opacity:dif});
        }
    })
});

function toggle(id) {
      var el = document.getElementById(id);
      var box = el.getAttribute("class");
      if(box == "hide"){
          el.setAttribute("class", "show");
          $('.logo').fadeTo(250, '1');
      }
      else{
          el.setAttribute("class", "hide");
          $('.logo').fadeTo(250, '0');
      }
  }

我相信我的“其他”声明是搞砸了。我很难弄清楚如何根据切换导航时滚动位置的位置开始添加规则。

任何建议或提示将不胜感激。非常感谢您的宝贵时间！

4

1 回答 1

0

也许这就是你正在寻找的：

//logo fade
//store the top
var _top=0;

$(document).ready(function(){
    $(document).scroll(function(){
        //store into the var
        _top=$(this).scrollTop();
        if(_top<250){
            _dif=1-_top/250;
            $(".logo").css({opacity:dif});
        }
    })
});

//this is when you click the menu
function toggle(id) {
    var el = document.getElementById(id);
    var box = el.getAttribute("class");
    if(box == "hide"){
        el.setAttribute("class", "show");
        //menu is on - no need to fade in
        //$('.logo').fadeTo(250, '1');
    }
    else{
        el.setAttribute("class", "hide");
        //fade the logo back in
        if(_top<250){
            var dif=1-_top/250;
            $(".logo").css({opacity:dif});
        }
        else
        {
            $('.logo').fadeTo(250, '0');
        }
    }
}
于 2013-11-19T05:35:27.883 回答