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