开发者

JQuery scroll does not work after PrettyPhoto has been triggered

Hello I hope someone can help me, I am using the jquery scroll function to jump to different sections in the page with anchors in a smooth way. I do it based on the scroll position, here is the code I develop to do that which works great:

// variables for the scroller effect
    var scrollTop;
    var timer;

    // we must be loading step 1, so make the first step the current one.
    $("#controlBtn li:eq(0)").addClass("current");
    $("#controlBtn li:eq(0) h1").show("fast");

    $('#controlBtn li a').click(function () {
        triggerCorrespondingItem();
    });

    $(window).scroll(function () {
        // store scrolling value
        scrollTop = $(window).scrollTop();

        console.log("scroll position: " + scrollTop); // testing

        // set timerfor when window scroller stops
        clearTimeout(timer);
        timer = setTimeout(function () {
            triggerCorrespondingItem();
        }, 250);
    });

    function triggerCorrespondingItem() {
        if (scrollTop >= 0 && scrollTop < 392) {
            // for step 1 "start"
            elem = $('#controlBtn li:eq(0)');
            if (!elem.hasClass("current")) {
                removingCurrentInstance();
                $("#controlBtn li:eq(0) h1").show("fast");
                $('#controlBtn li:eq(0)').addClass('current');
            }
        } else if (scrollTop > 725 && scrollTop < 1140) {
            // for step 2 "need"
            elem = $('#controlBtn li:eq(1)');
            if (!elem.hasClass("current")) {
                removingCurrentInstance();
                $("#controlBtn li:eq(1) h1").show("fast");
                $('#controlBtn li:eq(1)').addClass('current');
            }
        } else if (scrollTop > 1654 && scrollTop < 2075) {
            // for step 3 "contact"
            elem = $('#controlBtn li:eq(2)');
            if (!elem.hasClass("current")) {
                removingCurrentInstance();
                $("#controlBtn li:eq(2) h1").show("fast");
                $('#controlBtn li:eq(2)').addClass('current');
            }
        } else if (scrollTop > 2500 && scrollTop < 2949) {
            // for step 4 "pick-up"
            elem = $('#controlBtn li:eq(3)');
            if (!elem.hasClass("current")) {
                removingCurrentInstance();
                $("#controlBtn li:eq(3) h1").show("fast");
                $('#controlBtn li:eq(3)').addClass('current');
            }
        } else if (scrollTop > 3420 && scrollTop < 3870) {
            // for step 5 "pre-production"
            elem = $('#controlBtn li:eq(4)');
            if (!elem.hasClass("current")) {
                removingCurrentInstance();
                $("#controlBtn li:eq(4) h1").show("fast");
                $('#controlBtn li:eq(4)').addClass('current');
            }
        } else if (scrollTop > 4275 && scrollTop < 4745) {
            // for step 6 "sacanning"
            elem = $('#controlBtn li:eq(5)');
            if (!elem.hasClass("current")) {
                removingCurrentInstance();
                $("#controlBtn li:eq(5) h1").show("fast");
                $('#controlBtn li:eq(5)').addClass('current');
            }
        } else if (scrollTop > 5245 && scrollTop < 5660) {
            // for step 7 "delivery"
            elem = $('#controlBtn li:eq(6)');
            if (!elem.hasClass("current")) {
                removingCurrentInstance();
  开发者_JAVA技巧              $("#controlBtn li:eq(6) h1").show("fast");
                $('#controlBtn li:eq(6)').addClass('current');
            }
        } else if (scrollTop > 6092) {
            // for step 8 "resolution"
            elem = $('#controlBtn li:eq(7)');
            if (!elem.hasClass("current")) {
                removingCurrentInstance();
                $("#controlBtn li:eq(7) h1").show("fast");
                $('#controlBtn li:eq(7)').addClass('current');
            }
        } else {
            removingCurrentInstance();
        }
    }

    function removingCurrentInstance() {
        // remove "current" class and hide current label while scrolling
        $('#controlBtn li').removeClass('current');
        $("#controlBtn li h1").hide("fast");
    }

Then I have a link that open a video light box with prettyphoto, so after I open the video lightbox the scroll function above does not work anymore.


I was able to correct this by wrapping my scroll function into a new function and then calling the new function using the prettyPhoto callback parameter.

function scrolling(){
    $(window).scroll(function () {
       console.log($(window).scrollTop());
    });
}

  $("a[rel^='prettyPhoto']").prettyPhoto({
    callback: function(){scrolling();}
  });


hmmmm, im not too familiar with the plugin or anything but you could try this plugin to make your development a bit easier, just from the looks of your code, just take a look at it and the documentation, it would make things a bit easier and you may not have any problems with it:

jQuery Waypoints

http://imakewebthings.github.com/jquery-waypoints/

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜