Start scrolling at a given point only

[celined]

Hello,
Thanks for the great plugin. I am using it for this site http://mons-en-montois.fr
I was wondering if there is any way to start the horizontal scrolling only at a given point. In this case, I am trying to have the scrolling start after the horizontal content (home panel) is all gone. Hope that makes sense.

Any help would be greatly appreciated, thanks!

[pixxelfactory]

Hi, unfortunately i cannot open your website, the loading icon keeps spinning on and on.
Server down? ;-)

[celined]

Hi sorry about that, should be working now!
If not, is there a way I can send through some files (new to Github eheh)?
I was also wondering, is there a way to slow the scrolling speed down?

Thanks!

[pixxelfactory]

Hi, i don't think you can send files through Gh,
as for the issue you have: You cannot make it start scrolling at a certain position without rewriting core-parts of the plugin, but i found a little fix for your case, that would be a solution for both your problems: Simply change the height to a higher value, so the page scrolls slower and the photo-cards appear later.
Also: When clicking the menus, do not scroll horizontally, but make the window scroll vertically, so that the scrolling position is also updated, i rewrote your code to match those things.
Hope that helps.

Cheers
pixxelfactory

jQuery(document).ready(function ($) {
    var height = 9000;

    $.jInvertScroll(['.scroll'], {
        height: height
    });

    $('.navigation').find('a').on('click', function(e) {
        e.preventDefault();

        $('.navigation').find('a').removeClass('active');
        $(this).addClass('active');

        var slide = $(this).data('slide');
        var slidePos = $('#'+slide).position().left;

        var percent = slidePos / $('#postcards').width() * 100;

        $('html,body').animate({
            scrollTop: height / 100 * percent
        });
    });
});

[celined]

Wow thanks so much for your help, this works wonders :)
Just a quick question though: with the new code you've provided, the menu items do not scroll at the exact point where they should when clicked. Can you point me towards what I should do to fix this?

Thanks again!

[pixxelfactory]

Hmmm... i tried a little bit to mess with the divs you have,
i guess the problem resides within the ordering and positioning of the single divs.
I think it would be easier to create a transparent div, containing the anchors you want to link to, and position them manually, like stated here (obviously filling in your own positions).
Let me know if this helped you!

Regards
pixxelfactory

[sakshamsaxena]

I believe we can skip fiddling with the core, and rather define the initial thing ("home panel") like you want to and make it's height equal to the availHeight. Then simply mention the subsequent content (ONLY) in the plugin's selector and only that will horizontally scroll.
I haven't tried it but I think this makes sense.