6

so this seems to be a common question, however none of the answers have provided me with any joy. I've fully read the Skrollr Documentation and can conclude I'm totally at a loss here.

My Website

My basic html markup:

<html>
  <head>
    <!-- Head Stuff -->
  </head>

  <body>
    <div id="navbar">
      <!-- This is a fixed position div -->
    </div>
    <div id="skrollr-body">
      <!-- Rest of my site -->
    </div>
    <script src="skrollr.min.js"></script>
    <script>
      skrollr.init({
        forceHeight: false
      });
    </script>
  </body>

</html>

So you can see as the documentation states my fixed element is outside my other content.

I'm using Version 0.6.26 (2014-06-08) - downloaded from the GitHub page.

Download Zip

Mobile testing on iPad 2, iOS7 and Google Nexus 4, Android 4.4.4

Thanks in advance for any suggestions/help

Community
  • 1
  • 1
Matt
  • 1,983
  • 2
  • 25
  • 36

2 Answers2

1

I simply hadn't styled/set a height on the division skrollr-body. I fixed simply by adding:

#skrollr-body {
    float: left;
    width: 100%;
    height: 100%;
}
Matt
  • 1,983
  • 2
  • 25
  • 36
0

According to this (about half way down under the section mobile support), to make it work on mobile devices you need a #skrollr-body on your page, which I did not see in your source.

Also, this github issue seems to address this problem.

user3749994
  • 315
  • 2
  • 8
  • 18