Having trouble with absolute tracking from page bottom #133

Closed
stephenblender opened this Issue Feb 7, 2013 · 5 comments

Projects

None yet

2 participants

@stephenblender

Thanks in advance for any suggestions. I have skrollr installed and working ... partially. I have it set up detecting scrolling from the top of the page adjusting the opacity of a div, no problem. On another div I am trying to have it perform teh same action, but as I approach the end of the page. Despite using the "end" in my data tag, it seems to be tracking from the top.

My code for the div tracking from page top, works as expected:

 <div id="topbannerbar" data-start="opacity:1" data-300="opacity:0"></div>

My code for the div I would like to track as I approach the the bottom of the page, but seems to still be reading from the page top:

 <div id="bottombannerbar" class="clearfix" data-300-end="opacity:0" data-0-end="opacity:1">

The website is live if you would like to look in more detail at http://blender.ca/ . On the shorter pages it appears as if it is working, but on the longer pages you will see it is not. When testing with firebug I noted the opacity is being adjusting for the top 300px of scroll, rather than the last 300 I am trying to do.

Thanks for any help! Let me know if there is any more info I can provide...

@Prinzhorn
Owner

Does it work with forceHeight: false? I guess when it's true then only the highest keyframe is taken for end calculation (which is 300). I probably need to update the logic to use max(maxKeyframe, documentHeight). Thanks for reporting.

@stephenblender

If I set forceHeight to false I get no tracking on the troublesome div at all. No luck.

Reading your explanation I understand that I do not have enough keyframes for the height of my long pages? I found a solution for me, a hack. In case it is helpful or confirms what you are talking about,

With jquery i dynamically added a data object based on a calculated page height just prior to invoking skrollr. It does nothing, but inserts I frame to give me the full range. Seems to work, sorry if my sketchy understanding makes my explanation unclear. The code:

        sitecontentheight=$('#site-content').height()-400; // -400 because of margins
        scrollerlengthstring="data-"+sitecontentheight; // contruct data object label
        $('body').attr(scrollerlengthstring,"nothing"); // append data object with value nothing
        skrollr.init({forceHeight: true}); //skrollr

I'll keep an eye out for the bug fix or further explanation/solution. Thanks for the quick reply!

@Prinzhorn
Owner

Reading your explanation I understand that I do not have enough keyframes for the height of my long pages?

Well, not really. It is a bug in skrollr and will be fixed. Until then you can use your hack.

@Prinzhorn Prinzhorn added a commit that referenced this issue Feb 8, 2013
@Prinzhorn Properly get the scrollHeight cross-browser. Fixes #131 and #133
We were using body.scrollHeight which does not always hold the correct value.
We are now using the Math.max of five different values to properly get the
scrollHeight cross-browser. This fixes #131
Additionally we unified the _reflow function and use the Math.max of the
document height and the max-keyframe in order to fix #133.
e7e7c55
@Prinzhorn Prinzhorn added a commit that closed this issue Feb 8, 2013
@Prinzhorn Properly get the scrollHeight cross-browser. Fixes #131 and #133
We were using body.scrollHeight which does not always hold the correct value.
We are now using the Math.max of five different values to properly get the
scrollHeight cross-browser. This fixes #131
Additionally we unified the _reflow function and use the Math.max of the
document height and the max-keyframe in order to fix #133.
e7e7c55
@Prinzhorn Prinzhorn closed this in e7e7c55 Feb 8, 2013
@Prinzhorn
Owner

Please try with latest 0.5.13. This should have been fixed together with #131

@stephenblender

"Well, not really" - HA. I knew enough to know I probably didn't know. Your fix works perfectly, great work!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment