Question

您好希望有人可以帮助我，我正在使用jquery滚动功能以平滑的方式跳转到页面中不同的部分。我是根据滚动位置来做的，这是我开发的代码，它可以很好地运行：

// 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();
                $("#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");
    }

然后我有一个用漂亮照片打开视频灯箱的链接，所以打开视频灯箱后，上面的滚动功能不再有用了。

Answer 1

我能够通过将我的scroll函数包装到一个新函数然后使用prettyPhoto回调参数调用new函数来解决这个问题。

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

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

Answer 2

嗯，我不太熟悉插件或其他任何东西，但是你可以试试这个插件让你的开发变得更容易一些，只需从代码的外观来看，只需看一下它和文档，它就可以制作东西更容易一点，你可能没有任何问题：

jQuery Waypoints

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

触发PrettyPhoto后，JQuery滚动无效

2 个答案: