JQuery mobile hide address bar when scroll

Question

I have try to solution other people did, but I still can't hide the address bar in iPhone (Safari). Here is my code.

HTML:

<div class="Nav col-xs-12"> 
</div> 
<div class="ScrollBack">
  <div class="Banner col-xs-12">
  </div>
  <div class="Content col-xs-12"> 
  </div>    
</div>

CSS:

.ScrollBack{
    width: 100vw;
    height: 110vh;
    overflow-y:scroll;
}
.Nav{
    background: white;
    height: 6.8vh;
}
.Banner{
    background: green;
    height: 39.4vh;
}
.Content{
    background: blue;
    height: 53.8vh;
}

Javascript:

<script>
    window.addEventListener("load", function() {            
        window.scrollTo(0, 1);
     });
</script>

I need to always show the div (class='Nav') at the top, or is it the problem that I can't trigger scoll event?

I also found an interesting article with a possible solution here: http://menacingcloud.com/?c=iPhoneAddressBar — lumio, Aug 05 '17 at 13:32

score -1 · Answer 1 · answered Aug 05 '17 at 13:20

-1

 $(function(){$(window).bind('scroll', function () {}); });

bind scroll event like this way.

answered Aug 05 '17 at 13:20

Neeraj Pathak

759
4
13

JQuery mobile hide address bar when scroll

1 Answers1