So I'm a total novice when it comes to web design but I decided to start working on a showcase-website for myself: http://www.anikmusic.com
Let me describe what the gist of my problem is:
Previously, I was having issues with fixed positioned elements jumping and doing wacky things in mobile browsers, so I decided to create a site that, as you can see, doesn't use any fixed-positioned elements, but instead uses an absolutely positioned header and body that fits within the browser, and scales to its height and width.
The body acts as a quasi-iframe, a window into the content. Indeed, it is this
<div class="content" id="skrollr-body">that has all the real content inside of it, and it's that div, .content, that you're actually scrolling through when you're looking at the site. All the sections, home, bio, songs, etc. are all inside the content div.If you look at the code inside the content div, you'll find that the sections "songs", "scores", and "art" have this thing called a "media-content-color-underlay". It should look something like this:
<div class="media-content-color-underlay skrollable skrollable-before" data-bottom-top="background-color:hsla(4,55%,48%,0.0);" data-top="background-color:hsla(4,55%,48%,0.7);" data-top-bottom="background-color:hsla(144,48%,44%,0.7);" style="width: 700px; background-color: rgba(190, 64, 55, 0);"></div>Well, that's one of them. There are two others, and they're positioned one under the other, so that as you scroll, the underlay smoothly changes color from red to green to blue, before disappearing once you begin to scroll past the art section. Right now the underlay beneath the scores section is stuck at red and the one under art is stuck at green, and the one under songs is stuck at 0 opacity.
Now here's the problem. Normally, this would work just fine, but with the fancy new layout, where the content is actually inside a div inside the body, Skrollr doesn't seem to be able to tell when an element is coming into view, when it is in view, when it's out of view, etc. Skrollr, I believe, is using the window as its frame of reference, but I want it to use the div with class="content" as its frame of reference.
I tried adding
id="skrollr-body"to the aforementioned div, to no avail.
Any pointers or hints as to what I should do next?
