Skrollr not working on mobile devices
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 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.
Mobile testing on iPad 2, iOS7 and Google Nexus 4, Android 4.4.4
Thanks in advance for any suggestions/help
Answer
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%;
}