问题描述:

I'm creating this landing page: http://tag4share.com/landing/#

Where is located the two galaxy s3 (one white with "Organizador" label on it and a black with "Participante" label), I want to stop scrolling the page and automatically start scrolling the content inside the mobile (an iFrame, div, anything).

Is it possible?

Basically I want to "focus" the scrolling inside a div (and make it work even if the cursor isn't hovering it). Or animate while scrolling without scrolling the body.

Example: http://www.google.com/nexus/5/

On the "Everything you need to capture the moments that matter." part.

My attempt:

var lastScroll;

var currentScroll = $(window).scrollTop();

$(window).scroll(function() {

lastScroll = currentScroll;

currentScroll = $(window).scrollTop();

if($(window).scrollTop() >= 2024 && $(window).scrollTop() < 2500)

{

var difference = currentScroll - lastScroll;

$(".main").css({"margin-top":"-="+currentScroll});

}

});

I've tried to move the main div along with scrolling. It works but it looks really strange (keeps shaking).

Thanks!

网友答案:

I've just tidied up your code a tad, fixed indentation etc.

As for actually scrolling your div when you hit the position, use animate to actually mimic the scrolling effect, once you know you have reached the bottom, you can put another if statement within the scroll function to stop resetting the scroll position.

var lastScroll;
var scrollPosition = $(window).scrollTop();
var reachedBottom = false;
var phonePositionTop = $('#phoneContainerID').position().top;
var phonePositionBottom = phonePositionTop + $('#phoneContainerID').height();

$(window).scroll(function() {

    if(scrollPosition >= phonePositionTop && scrollPosition < phonePositionBottom && reachedBottom == false){
        var difference = currentScroll - lastScroll;
        // Keep resetting scroll to the phoneContainerTop position
        $(".main").css({"margin-top": phonePositionTop});
        var scrollLimit = -100;
        if ($('#phoneContainerID').position().top < scrollLimit) {
            //Once the scroll limit is less than -100 (scrolled up 100 pixels)
            // Disable our 'pause' effect, and continue
            reachedBottom = true;
        }

    }
});

I haven't tested this, however I was just giving you an idea of where to go from here.

I hope I have helped a little!

相关阅读:
Top