Fixed navigation when jumping -webkit-overflow-scrolling: touch;

Question

Fixed navigation when jumping -webkit-overflow-scrolling: touch;

This only happens in Safari on IOS

I applied

body {
    font-family: helvetica, verdana, sans-serif;
    background: #fff;
    overflow: auto;
    height: 100%;
    overflow-y: scroll; /* I added this */
    -webkit-overflow-scrolling: touch; /* and also this */
}

This is because I wanted smooth scrolling on mobile (Safari on IOS). But after that I introduced a new error, now my navigation doesn't fix on scrolling. It jumps and updates its location after it stops scrolling.

Here's the css for navigation

.nav-bar {
    background-color: #ff0000;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 51px;
    z-index: 1030;
    max-height: 51px;
}

.nav-container {
    margin: 0 auto;
    height: 51px;
    max-width: 1170px;
    width: 100%;
}

Here is the html

<body class="home">

    <div class="nav-bar">

        <div class="nav-container">

        </div>

    </div>

    <div class="content">
        <p>content here</p>
    </div>

</body>