Hide-navbar-on-scroll doesn't work

Questions
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

6

I would like to reopen this issue as I can’t seem to get my common navbar to hide on page scroll.

Can anyone confirm that the hide on scroll feature should work for “common” navbars or does that feature only apply to static and fixed navbars? Thanks!

7

You might be correct that it’s not working for common navbars. Here’s a JS Fiddle where I’ve tried it https://jsfiddle.net/kerrydp/wz4v9buf/30/

1 Like
8

@nolimits4web I would “love” to have this feature work with “common” navbars. Please consider this feature in a future build. Thanks for all your hard work. Loving it!

9

Will add to my todo list :wink: