/ / jQuery: zmiana klasy po spełnieniu warunku - javascript, jquery, html5, css3, paralaksa

jQuery: zmiana klasy po spełnieniu warunku - javascript, jquery, html5, css3, paralaksa

Stworzyłem to teren gdzie masz wiele suwaków poruszających się w pionie za pomocą tego przykładu na stackoverflow> tutaj <razem z tym skrzypce.

Witryna po załadowaniu ma przepełnienie: ukryte w treści i pozycji ustalonej na mojej głównej zawartości div(div class="content-fs row"). Pomysł polega na tym, że po pierwszym przybyciu na stronę przewijasz każdy slajd, a gdy trafisz na ostatnią, pozycja zmienia się na głównej zawartości div(div class="content-fs row") od stałego do statycznego i przepełnienia: ukryty jest usuwany z ciała. Mam problem z napisaniem instrukcji warunkowej, która mówi „jeśli jest ostatnim suwakiem, zmień pozycję.” Poniższe jquery to kod, którego używam dla witryny wraz z instrukcją warunkową, która nie działa.

Wszelkie wskazówki / porady byłyby bardzo mile widziane!

jquery:

function scrollLax(){
/*
initialize
*/
var scrollDown = false;
var scrollUp = false;
var scroll = 0;
var $view = $("#portfolio");
var t = 0;
var h = $view.height() - 250;


$view.find(".portfolio-sliders").each(function() {
var $moving = $(this);
// position the next moving correctly
if($moving.hasClass("from-bottom")) {
$moving.css("top", h); // subtract t so that a portion of the other slider is showing
}
// make sure moving is visible
$moving.css("z-index", 10);
});
var $moving = $view.find(".portfolio-sliders:first-child");
$moving.css("z-index", 10);

/*
event handlers
*/

var mousew = function(e) {
var d = 0;
if(!e) e = event;
if (e.wheelDelta) {
d = -e.wheelDelta/3;
} else if (e.detail) {
d = e.detail/120;
}
parallaxScroll(d);
}
if (window.addEventListener) {
window.addEventListener("DOMMouseScroll", mousew, false);
}
window.onmousewheel = document.onmousewheel = mousew;
/*
parallax loop display loop
*/
window.setInterval(function() {
if(scrollDown)
parallaxScroll(4);
else if(scrollUp)
parallaxScroll(-4);
}, 50);

function parallaxScroll(scroll) {
// current moving object
var ml = $moving.position().left;
var mt = $moving.position().top;
var mw = $moving.width();
var mh = $moving.height();
// calc velocity
var fromBottom = false;
var vLeft = 0;
var vTop = 0;
if($moving.hasClass("from-bottom")) {
vTop = -scroll;
fromBottom = true;
}
// calc new position
var newLeft = ml + vLeft;
var newTop = mt + vTop;
// check bounds
var finished = false;
if(fromBottom && (newTop < t || newTop > h)) {
finished = true;
newTop = (scroll > 0 ? t : t + h);
}

// set new position
$moving.css("left", newLeft);
$moving.css("top", newTop);
// if finished change moving object
if(finished) {
// get the next moving
if(scroll > 0) {
$moving = $moving.next(".portfolio-sliders");
if($moving.length == 0)
$moving = $view.find(".portfolio-sliders:last");
//this is where I am trying to add the if conditional statement.
if (".portfolio-sliders:last")
$(".content-fs.row").css({"position": "static"});
if(".portfolio-sliders:last" && (mt == 0))
$("html, body").removeClass("overflow");
} else {
$moving = $moving.prev(".portfolio-sliders");
if($moving.length == 0)
$moving = $view.find(".portfolio-sliders:first-child");
//reverse the logic and if last slide change position
if(".portfolio-sliders:first-child")
$(".content-fs.row").css({"position": "fixed"});
}

}
// for debug
//$("#direction").text(scroll + "/" + t + " " + ml + "/" + mt + " " + finished + " " + $moving.text());

}

}

Odpowiedzi:

1 dla odpowiedzi № 1

Twój kod po prostu pyta, czy .portfolio-sliders:last istnieje. Wydaje się, że powinieneś robić:

if ($moving == $(".portfolio-sliders:last") )

lub coś w tym stylu, zamiast sprawdzania, czy aktywny slajd jest ostatni.