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/
精彩评论