【问题标题】:jQuery: change class after conditional is metjQuery:满足条件后更改类
【发布时间】:2014-02-15 06:14:46
【问题描述】:

我创建了这个site,你有多个滑块垂直移动使用stackoverflow上的这个例子>herefiddle。

加载时站点有溢出:隐藏在主体上,位置固定在我的主要内容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());

}

}

【问题讨论】:

  • 虽然您的网站有点酷,但它似乎缺少键盘导航。请务必考虑那些使用替代设备的人。
  • 我有键盘导航,但没有包含它。我的滚动导航确实有另一个问题,它似乎不适用于 Firefox,但我是针对另一个 stackoverflow 问题。不过感谢您的提示。

标签: javascript jquery html css parallax


【解决方案1】:

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

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

或类似的东西,而不是检查活动幻灯片是否是最后一张。

【讨论】:

  • 感谢您的快速回复,@isherwood!添加您建议的代码行时出现错误(“意外令牌:关键字(if)”)。有什么想法吗?不过我会继续努力...
  • 糟糕。额外if。已编辑。
  • 它会在第一张幻灯片到达顶部后删除类。我也试过这个(if ($moving == $('.portfolio-sliders:last') )),但我得到了相同的结果。
  • 感谢@isherwood 的帮助!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-06-26
  • 1970-01-01
  • 2021-11-24
  • 1970-01-01
相关资源
最近更新 更多