JQuery: change class after condition is met

I created this site where you have several sliders moving vertically using this example in stackoverflow> here <along with this fiddle .

The site has an overflow when loading: it is hidden on the body and the position is fixed on my main content div (div class="content-fs row"). The idea is that when you first come to the page, you look at each slide, and after you click on the last one, the position will change to the main content div (div class="content-fs row")from fixed to static and overflow: hidden is removed from the body, I have problems with writing a conditional statement that says: "If this is the last slider, change the position." The jquery below is the code I use for the site, as well as the conditional statement that does not work.

Any pointers / tips would be greatly appreciated!

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());

}

}
+3
source share
1 answer

, , .portfolio-sliders:last. , :

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

- , , .

+1

All Articles