Проблема с отображением / скрытием Div на свитке Jquery

Question

У меня есть div, который фиксируется в верхней части страницы, и когда пользователь прокручивает его вниз, он прячется, но когда он прокручивается вверх, он показывает. Мой код до сих пор работает, чтобы сделать это. Но когда я попадаю в верхнюю часть страницы, скрываемый баннер не отображается, и возникает отскок, когда баннер не отображается, а затем отображается. Как я могу устранить это? Я тестирую на устройстве IOS. Пока код:

Html для баннера

<div class="stick-top" id="banner">
   <p id="title"><b>Title</b></p>
    <p>This is the text</p>
</div>

Jquery

$(document).ready(function() {

var $src = $('#banner');

var $topHeader = $('.header_upper');
var $bottomHeader = $('.header_lower');

var $nav = $('#nav-headers');

$topHeader.last().addClass("header-top-stick");
$bottomHeader.last().addClass("bottom-top-stick");

var lastScrollTop = 0;

$(window).scroll(function(event){

  var st = $(this).scrollTop();
  if (st > lastScrollTop) {

    $src.last().removeClass("sticky-scroll").css("display", "none");
    $src.last().removeClass("stick-top");

    $topHeader.last().removeClass("header-top-stick");
    $bottomHeader.last().removeClass("bottom-top-stick");

  } else {
    $src.last().addClass("sticky-scroll").css("display", "block");
    $topHeader.last().addClass("header-top-stick");
    $bottomHeader.last().addClass("bottom-top-stick");
  }

  if (st == 0) {
    $src.last().addClass("stick-top").css("display", "block");
    //$src.last().removeClass("sticky-scroll");
    $topHeader.last().addClass("header-top-stick");
    $bottomHeader.last().addClass("bottom-top-stick");
  }

  lastScrollTop = st;

  if ($nav.css('top') == '0') {
    $src.css("display", "block");
  } else if ($nav.css('top') == '-140px')  {
    $src.hide();
  } 
});

});

CSS

.sticky-scroll {
  top: 0px;
  position: fixed;
}
.sticky-scroll2 {
  top: 0px;
  position: fixed;
}

.stick-top {
  top: 0px;
  position: fixed;
}

.header-top-stick {
  top: 140px!important;
}

.bottom-top-stick {
  top: 180px!important;
}

#banner{
  background-color:#dfdfdf;
  color: #FFF!important;
  text-decoration:none!important;
  padding:10px;
  text-align:center;
  height:140px;
  cursor:pointer;
  z-index:999999;
}

#headers{
  top:110px!important;
  z-index: 999999;
}