How to use Scroll top method

Question

The header on scroll should slide/up down as indicated in the jQuery, However, in mobile iOS this does not occur and the header judders at the top of the screen?

This works on Chrome, Mozilla Firefox, Internet Explorer and Safari - on big browsers.

Is this occurring because of an incorrect use of the scroll top method? How do I correct this?

jQuery(document).ready(function ($) {
var lastScrollTop = 0;
$(window).scrollTop(0);

$(window).on('scroll', function() {
    var header = $('header');
    var content = $('content');
    var headerBg = $('.header-bg');
    var headerCnt = $('.header-content');
    var scrollTop = $(window).scrollTop();
    var dynHeaderVisible = false;
  
    if (lastScrollTop > scrollTop) {
      if (scrollTop <= 400) {
        headerBg.css("height", 0);
        headerCnt.css('color', 'white');
      } else {
        headerBg.css("height", 80);
        headerCnt.css("height", 80);
        headerCnt.css('color', 'black');
      }
    } else {
      // Down
      if (scrollTop > 350) {
        console.log ("hi");
        headerCnt.css("height", 0);
        headerBg.css("height", 0);
      }
    }
    
    lastScrollTop = scrollTop;
});

$.fn.isOnScreen = function(){
    var element = this.get(0);
    var bounds = element.getBoundingClientRect();
    return bounds.top < window.innerHeight && bounds.bottom > 0;
}
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  list-style: none;
  text-decoration: none;
  font-size:1em;
  font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
  }
	a {
    background:transparent;
    border:none;
    letter-spacing:0.15em;
    text-transform:uppercase;
    transition: .3s color;
	transition: .3s height;
	}


header {
  display: block;
  position: fixed;
  height: 80px;
  width: 100%;
}

header ul {
  z-index: 20;
}

.header-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: transparent;
}

.header-bg,
.header-content {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

.header-bg {
  z-index: 100;
  color: gray;
  background-color: white;
  border-bottom: 1px solid black;
  transition: .3s height;
  height: 0;
}

.header-content {
  z-index: 200;
  transition: .3s color;
  color: white;
  background-color: transparent;
  height: 80px;
  transition: .3s height;
  overflow: hidden;
  list-style: none;
}

.logo {
    position: absolute;
    left: 47%;
	color: inherit;
    display: inline-block;
    width: 15px;
    height: 15px;
    padding: 18px;
    cursor: pointer;
    font-size:.8em;
    letter-spacing:0.05em;
	transition: .3s color;
	}
</style>
<style>

content {
  display: block;
  height: 2000px;
  background-color: orange;
}

.stage {
    color: #fff;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100vh;
    background-color: white;
	border-bottom: 1px solid black;
    font-size: 48px;
	height: 200px;
	width: 100%;
}

.stage-0 {
    background: grey;
    height: 400px;
}

<script src=	"//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<header>
  <div class="header-wrapper">
    <div class="header-bg"></div>
    <div class="header-content">
      <ul>
        <li>
        <a href="" class="logo">Logo </a>
        </li>
      </ul>
    </div>
  </div>
</header>
<content>
<div class="stage stage-0">1</div>
<div class="stage stage-2">3</div>
<div class="stage stage-4">5</div>
<div class="stage stage-6">7</div>
<div class="stage stage-8">9</div>
<div class="stage stage-10">11</div>
<div class="stage stage-12">13</div>
<div class="stage stage-14">15</div>
<div class="stage stage-16">17</div>
<div class="stage stage-18">19</div>
<div class="stage stage-20">21</div>
<div class="stage stage-22">23</div>
</content>

Answer 1

Try this code

$(window).scroll(function() {
    var scrollTop = $(this).scrollTop(), //Get the current vertical position of the scroll bar for the first element in the set of matched elements
                     header = $('.header-content'); // Target Element

    if(scrollTop > header.offset().top) {
        header.addClass('navbar-fixed-top'); 
    }
}

Answer 2

Fixed elements can have some pretty wonky effects on mobile devices due to it not working properly with touch events (in this case the scrolling I guess).

I'm not 100% if that's the issue here but I think there's a good possibility that it is.

There's something called Modernizr (https://modernizr.com/) which helps you detect all kinds browser-related stuff including if it's working on a touchscreen or not. I don't think there's currently a real solution to the bad working between touch events and fixed elements, but with Modernizr you can try to find some kind of workaround.

Goodluck!