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