Hide-navbar-on-scroll doesn't work


#1

Hi everybody! I need a help with a navbar. In ,y app I have one common navbar for all screens and I want to hide it on scrolling. To achieve this i tried css class hide-navbar-on-scroll accordingly to the doc but it didn’t bring any effect. How can I fix it?

The structure index.html:

<!DOCTYPE html>
<html lang="en">
 <head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- Status bar overlay for fullscreen mode-->
<div class="statusbar"></div>
<div class="panel-overlay"></div>
<!--Left navigation drawer-->
<div class="panel panel-left panel-cover"></div>
<!-- Your main view, should have "view-main" class -->
<div class="views">
    <div class="view view-main view-init" data-url="/">
        <!--Common navigation bar for all screens-->
        <div class="navbar">
            <div class="navbar-inner sliding">
                <div class="left">
                    <a href="#" class="link icon-only panel-open" data-panel="left">
                        <i class="icon f7-icons ios-only">menu</i>
                        <i class="icon material-icons md-only">menu</i>
                    </a>
                </div>
                <div class="title">
                    Example
                </div>
                <div class="right">
                    <a href="#" class="link icon-only">
                        <i class="icon f7-icons ios-only">bell</i>
                        <i class="icon material-icons md-only">notifications</i>
                    </a>
                </div>
            </div>
        </div>
        <div class="pages">
            <div class="page">
                <div class="page-content hide-navbar-on-scroll">
                    <!--Content of the current screen-->
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</body>
</html>

I have also element which is called in main-view with such structure

<template>
    <div class="page">
        <div class="page-content hide-navbar-on-scroll">

Non of this class “hide-navbar-on-scroll” insertions doesn’t work


#2

Try to remove the pages block <div class="pages"> and try with a single page. Simple first to debug


#3

On single page it works but when i put hide-navbar-on-scroll in template page-content it doesn’t work


#4

Can you create a JSFiddle with the issue so we can check?


#5

I’ve never worked with Fiddle. So to save you time I post here the simplified achieved project with described issue. This issue treats only to ‘ios’ theme. In md theme navbar simply disappears.
Project code