Issues With Position Fixed - no updated values on scroll only when stop scrolling on iPhone

1

I am trying to have a fixed position menu when scrolling and I have some issues with the scrolling position specially on iPhone…

position: fixed - no updated values on scroll…

on the browser it works perfectly but when using it with iPhone the fixed position is not working until stop scrolling because no updated values on scroll…

here my code:

.header {
  background-color: #f1f1f1;
  padding: 0px;
  text-align: center;
}

#navbar {
  transform: translate3d(0,0,0);
  overflow: hidden;
  background-color: #fff;
}


.sticky {
  position: fixed;
  position:-webkit-sticky;
  top: 0;
  width: 100%;
  z-index:2;
  overflow:scroll;
  -webkit-overflow-scrolling:touch;
}

.sticky + .content {
  padding-top: 120px;
  overflow:scroll;
  -webkit-overflow-scrolling:touch;
}


      pageInit: function(e, page) {
        console.log('pageInit', page);

        $('.page-content').on('scroll', function() {

          var scrollTop = this.scrollTop;
          console.log(scrollTop);
          console.log($('.page-content').scrollTop() + ' ' + $("#navbar").offset().top);

          if (scrollTop >= 200) {
            $("#navbar").addClass('sticky');
          } else {
            $("#navbar").removeClass('sticky');
          }

        })
...

<template>
  <div class="page">


    <div class="page-content">

      <div class="header">
        <div data-background="img/man-at-the-gym_02.jpg" class="lazy lazy-fade-in demo-lazy" style="height:200px"></div>
      </div>


      <div id="navbar" style="height:120px">

        <div class="toolbar tabbar tabbar-scrollable toolbar-{{toolbarPosition}}" style="position:relative">
          <div class="toolbar-inner" style="position:relative">
            {{#each tabs}}
              <a href="#tab-{{this}}" class="tab-link {{#if @first}}tab-link-active{{/if}}">Tab {{this}}</a>
            {{/each}}
          </div>
        </div>

        <div class="block-title display-flex justify-content-space-between" style="margin-top:5px;margin-bottom:5px">Price Filter <span class="price-value">${{priceMin}} - ${{priceMax}}</span></div>
        <div class="list simple-list" style="margin:0px">
          <ul>
            <li class="item-row">
              <div class="item-cell width-auto flex-shrink-0">
                <i class="icon f7-icons if-not-md" style="width:28px">money_dollar_round</i>
                <i class="icon material-icons md-only" style="width:24px">attach_money</i>
              </div>
              <div class="item-cell item-cell-shrink-3">
                <div class="range-slider range-slider-init color-green" @range:change="onPriceChange" data-label="true" data-dual="true" data-min="0" data-max="500" data-step="1" data-value-left="200" data-value-right="400"></div>
              </div>
              <div class="item-cell width-auto flex-shrink-0">
                <i class="icon f7-icons if-not-md" style="width:28px">money_dollar_round_fill</i>
                <i class="icon material-icons md-only" style="width:24px">monetization_on</i>
              </div>
            </li>
          </ul>
        </div>

      </div>

      <div class="content">


        <div class="list components-list searchbar-found">
          <ul>
            <li>
              <a class="item-content item-link" href="/">
                <div class="item-media"><i class="icon icon-f7"></i></div>
                <div class="item-inner">
                  <div class="item-title">Index</div>
                </div>
              </a>
            </li>
            <li>
              <a class="item-content item-link" href="/home/">
                <div class="item-media"><i class="icon icon-f7"></i></div>
                <div class="item-inner">
                  <div class="item-title">Home</div>
                </div>
              </a>
            </li>
            <li>
              <a class="item-content item-link" href="/accordion/">
                <div class="item-media"><i class="icon icon-f7"></i></div>
                <div class="item-inner">
                  <div class="item-title">Accordion</div>
                </div>
              </a>
            </li>
            <li>
              <a class="item-content item-link" href="/action-sheet/">
                <div class="item-media"><i class="icon icon-f7"></i></div>
                <div class="item-inner">
                  <div class="item-title">Action Sheet</div>
                </div>
              </a>
            </li>
            <li>
              <a class="item-content item-link" href="/appbar/">
                <div class="item-media"><i class="icon icon-f7"></i></div>
                <div class="item-inner">
                  <div class="item-title">Appbar</div>
                </div>
              </a>
            </li>
            <li>
              <a class="item-content item-link" href="/autocomplete/">
                <div class="item-media"><i class="icon icon-f7"></i></div>
                <div class="item-inner">
                  <div class="item-title">Autocomplete</div>
                </div>
              </a>
            </li>
            <li>
              <a class="item-content item-link" href="/badge/">
                <div class="item-media"><i class="icon icon-f7"></i></div>
                <div class="item-inner">
                  <div class="item-title">Badge</div>
                </div>
              </a>
            </li>
            <li>
              <a class="item-content item-link" href="/buttons/">
                <div class="item-media"><i class="icon icon-f7"></i></div>
                <div class="item-inner">
                  <div class="item-title">Buttons</div>
                </div>
              </a>
            </li>
            <li>
              <a class="item-content item-link" href="/calendar/">
                <div class="item-media"><i class="icon icon-f7"></i></div>
                <div class="item-inner">
                  <div class="item-title">Calendar / Date Picker</div>
                </div>
              </a>
            </li>
            <li>
              <a class="item-content item-link" href="/cards/">
                <div class="item-media"><i class="icon icon-f7"></i></div>
                <div class="item-inner">
                  <div class="item-title">Cards</div>
                </div>
              </a>
            </li>
            <li>
              <a class="item-content item-link" href="/cards-expandable/">
                <div class="item-media"><i class="icon icon-f7"></i></div>
                <div class="item-inner">
                  <div class="item-title">Cards Expandable</div>
                </div>
              </a>
            </li>
            <li>
              <a class="item-content item-link" href="/checkbox/">
                <div class="item-media"><i class="icon icon-f7"></i></div>
                <div class="item-inner">
                  <div class="item-title">Checkbox</div>
                </div>
              </a>
            </li>
            <li>
              <a class="item-content item-link" href="/chips/">
                <div class="item-media"><i class="icon icon-f7"></i></div>
                <div class="item-inner">
                  <div class="item-title">Chips / Tags</div>
                </div>
              </a>
            </li>
            <li>
              <a class="item-content item-link" href="/color-picker/">
                <div class="item-media"><i class="icon icon-f7"></i></div>
                <div class="item-inner">
                  <div class="item-title">Color Picker</div>
                </div>
              </a>
            </li>
            <li>
              <a class="item-content item-link" href="/contacts-list/">
                <div class="item-media"><i class="icon icon-f7"></i></div>
                <div class="item-inner">
                  <div class="item-title">Contacts List</div>
                </div>
              </a>
            </li>
            <li>
              <a class="item-content item-link" href="/content-block/">
                <div class="item-media"><i class="icon icon-f7"></i></div>
                <div class="item-inner">
                  <div class="item-title">Content Block</div>
                </div>
              </a>
            </li>
            <li>
              <a class="item-content item-link" href="/data-table/">
                <div class="item-media"><i class="icon icon-f7"></i></div>
                <div class="item-inner">
                  <div class="item-title">Data Table</div>
                </div>
              </a>
            </li>
            <li>
              <a class="item-content item-link" href="/dialog/">
                <div class="item-media"><i class="icon icon-f7"></i></div>
                <div class="item-inner">
                  <div class="item-title">Dialog</div>
                </div>
              </a>
            </li>
            <li>
              <a class="item-content item-link" href="/elevation/">
                <div class="item-media"><i class="icon icon-f7"></i></div>
                <div class="item-inner">
                  <div class="item-title">Elevation</div>
                </div>
              </a>
            </li>
            <li>
              <a class="item-content item-link" href="/fab/">
                <div class="item-media"><i class="icon icon-f7"></i></div>
                <div class="item-inner">
                  <div class="item-title">FAB</div>
                </div>
              </a>
            </li>
            <li>
              <a class="item-content item-link" href="/fab-morph/">
                <div class="item-media"><i class="icon icon-f7"></i></div>
                <div class="item-inner">
                  <div class="item-title">FAB Morph</div>
                </div>
              </a>
            </li>
          </ul>
        </div>



      </div>
    </div>

  </div>
</template>

I just need the content to scroll up and down and the menu with a Tabbar and range price component stay always fixed on top when scrolling…

in the browser it is working fine but not on iPhone!

any ideas how to fix the problem in iPhone for fixed position?
thanks

2

This was actual for very old iPhones. Do you use old iPhone, or if cordova do you use default UIWebView? You need to use modern WKWebView

3

I tried with iPhone 5s and 6 and 7 and same issue with positioning! maybe cordova can fix it I will try to check that now…

If you have solved it with cordova I will appreciate you can let me know how you made it work on old and new iPhones! Old I mean from Iphone 5s and above…

in my cordova config.xml I have:

    <preference name="UIWebViewBounce" value="true" />

    <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />

    <plugin name="cordova-plugin-wkwebview-engine" spec="^1.1.4" />
    <plugin name="cordova-plugin-wkwebviewxhrfix" spec="https://github.com/TheMattRay/cordova-plugin-wkwebviewxhrfix" />

thanks Vladimir!

4

Having this plugin

should solve, in WKWebView engine scroll updates with every scroll correctly.

Otherwise, problem is in somewhere else, and actually you shouldn’t use position: fixed at all, just use position: absolute element on top of scrollable element

1 Like
5

Thank you Vladimir I have installed cordova-plugin-wkwebview-engine already and seems not to work in iPhone 5s … maybe I should try another fix as you mentioned it! sadly I do not see what is the problem but in my case the values when scrolling are not being updated until scroll stops and the plugin cordova-plugin-wkwebview-engine is installed…

I will see if I can use the other solution you mention!
If I have another solution for the problem I am having I will post it here…
thanks a lot!