Get scroll position in JQuery when using onepage_scroll plugin

Question

I'm using the great onepage_scroll plugin for a site. Below a set threshold the page reverts to normal scroll behaviour. However at this point - when I try to use scrollTop() to get the distance from the top of the page it always returns 0.

var vph = $(window).height();
var responsiveThreshold = 640;

$(".onepage_scroll").onepage_scroll({
   sectionContainer: "section",     // sectionContainer accepts any kind of selector in case you don't want to use section
   easing: "ease",                  // Easing options accepts the CSS3 easing animation such "ease", "linear", "ease-in", 
                                    // "ease-out", "ease-in-out", or even cubic bezier value such as "cubic-bezier(0.175, 0.885, 0.420, 1.310)"
   animationTime: 1000,             // AnimationTime let you define how long each section takes to animate
   pagination: false,                // You can either show or hide the pagination. Toggle true for show, false for hide.
   updateURL: true,                // Toggle this true if you want the URL to be updated automatically when the user scroll to each page.
   beforeMove: scrollCatchBefore,  // This option accepts a callback function. The function will be called before the page moves.
   afterMove: scrollCatchAfter,   // This option accepts a callback function. The function will be called after the page moves.
   loop: false,                     // You can have the page loop back to the top/bottom when the user navigates at up/down on the first/last page.
   keyboard: true,                  // You can activate the keyboard controls
   responsiveFallback: responsiveThreshold        // You can fallback to normal page scroll by defining the width of the browser in which
                                    // you want the responsive fallback to be triggered. For example, set this to 600 and whenever 
                                    // the browser's width is less than 600, the fallback will kick in.
});




// Fix menu if page is too small
if(vpw<responsiveThreshold) {
    $("#navigation").hide();

    /* Every time the window is scrolled ... */
    $('body').scroll( function(){

        var scrollPos = $('html').scrollTop();
        console.log(vph);
        console.log(scrollPos);

        if(scrollPos > vph) {
            $("#navigation").fadeIn();
        } else {
            $("#navigation").fadeOut();
        }
    });
}

I've also tried both of the following:

$('body').scrollTop();
$('.onepage_scroll').scrollTop();
$(window).scrollTop();

score 0 · Answer 1 · edited May 23 '17 at 11:57

0

Looking at how onepage_scroll works, it is not moving the body or the divs in a typical manner. So scrollTop is not the solution here.

It is using translate3d on the following div in question...

<div class="main onepage-wrapper">

With the following modified styles as the plugin operates...

-webkit-transform: translate3d(0px, -100%, 0px);

This answer may be of use to you... Get translate3d values of a div?

edited May 23 '17 at 11:57

Community

1
1

answered Apr 09 '14 at 10:38

fuzzysearch

846
9
15

But this wouldn't account below the responsiveFallback width below that point scrolling should return to normal. – Ben Apr 09 '14 at 17:53

score 0 · Answer 2 · answered Apr 09 '14 at 10:51

0

To know current index of section:

var nCurSect = $("section.active", ".main").data("index");

Then you can just multiply it to the screen height and get offset.

answered Apr 09 '14 at 10:51

kot-6eremot

71
8

Below the responsiveFallback width though normal scroll is retained right? – Ben Apr 09 '14 at 17:52
1

When you set the value of `responsiveFallback` the plugin reacts to `$(window).resize` event calling internal `responsive()` function. There if `$(window).width()` is less than `responsiveFallback` value plugin adds class `disabled-onepage-scroll` to the `body` tag. If greater that class will be removed. – kot-6eremot Apr 10 '14 at 06:21

Get scroll position in JQuery when using onepage_scroll plugin

2 Answers2