Исчезать логотип jQuery на основе позиции прокрутки

Question

Я пытаюсь выполнить задачу с помощью jQuery (новичок), и я почти все понял, кроме одного шага. У меня есть логотип, который исчезает после прокрутки 250px вниз по странице. У меня также есть верхняя панель навигации, которая скользит вниз и опускает логотип вниз. Если размер страницы превышает 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');
      }
  }

Я верю, что мое "другое" утверждение - то, что портит это. Мне трудно понять, как начать добавлять правила, основанные на положении прокрутки при переключении навигации.

Любые предложения или советы будут с благодарностью. Большое спасибо за ваше время!

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