Question

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

我的问题是当我在页面的前250px内。当我打开和关闭导航时，徽标在关闭导航时完全消失。我希望它能够返回基于滚动位置与页面的第一个250px的不透明度。

示例（必须在大于768px的浏览器中查看）：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');
      }
  }

我相信我的“其他”陈述正在解决这个问题。我很难弄清楚如何根据切换导航时滚动位置的位置开始添加规则。

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

Answer 1

也许这就是你要找的东西：

//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');
        }
    }
}

基于滚动位置淡化jQuery徽标

1 个答案: