Question

我创建了这个site，您可以在stackoverflow＆gt;上使用此示例垂直移动多个滑块。 here＆lt;以及fiddle。

加载时网站有溢出：隐藏在正文和固定在我的主要内容div (div class="content-fs row")上的位置。我们的想法是，当您第一次到达页面时，滚动浏览每张幻灯片，一旦您点击最后一张幻灯片，主要内容div (div class="content-fs row")上的位置将从固定更改为静态，并且溢出：隐藏将从身体。我在编写条件语句时遇到问题，该语句说“如果它是最后一个滑块，则改变位置”。下面的jquery是我用于网站的代码以及不起作用的条件语句。

非常感谢任何指针/建议！

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

}

}

Answer 1

您的代码只是询问.portfolio-sliders:last是否存在。似乎你应该这样做：

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

或沿着这些行的某些内容，而不是检查活动幻灯片是否是最后一个。

jQuery：满足条件后更改类

1 个答案: