Question

我正在制作这个网站 DEMO SITE HERE

ID：测试 PASS：2015

我在滚动窗口时将navi类更改为活动状态，但由于某种原因它无法正常工作...

当我滑到第一部分时，我的导航将不会更改为活动模式，直到幻灯片进一步向下。（在13inch macbook中查看时）因此，不对齐也影响其他幻灯片。

继续捕获，右侧的第一个导航应该是活动的并且颜色较深

我使用下面的代码进行导航更改

;(function (d, $) {

var jQdm_adjustContent;

jQdm_adjustContent = function（）{

// 初期設定
var prop = {
  $window: $(window),
  snapTarget: '.column',
  snapSpeed: 500,
  snapInterval: 500,
  transitionSpeed: 1200,
  transitionEasing: 'easeInOutBack',
  transitionEasingException: 'easeInOutQuint',
  mainNavigation: '#mainNavigation',
  deferredImage: 'img.deferred',
  dataPossessor: [],
  currentSelector: '.current'
}

function init(){

  // スナップ（位置補正）させる要素をキャッシュ
  var _$t = $(prop.snapTarget),
  _$w = prop.$window;

  // ページロード時とリサイズ時に、スナップ要素のサイズをウィンドウサイズに合わせるように設定
  _$w.on('load', function(){
    setTargetPostion(_$t);
    fitWindowScale(_$t);
  });
  _$w.on('resize', function(){
    setTimeout( function() {
      setTargetPostion(_$t);
      fitWindowScale(_$t);
    }, 200);
  });
  // ページスクロール時に現在地チェック処理へ
  _$w.on('scroll', function(){
    changeCurrent();
  });
  // ページ読み込み一定時間後に現在位置確認処理へ
  setTimeout( function(){
    setTargetPostion(_$t);
  }, 100);


  // // スナップ対象要素にスナップ機能を付与する
  // _$t.windows({
  //   snapping: true,
  //   snapSpeed: prop.snapSpeed,
  //   snapInterval: prop.snapInterval
  // });

  // ナビゲーションのクリックイベント
  $(prop.mainNavigation).find('a').on('click', function(e){
    if(typeof e.preventDefault() !== undefined){
      e.preventDefault();
    }

    // リンクの飛び先のキャッシュとイージングを設定
    var _href = $(this).attr('href'),
    _ease = $(this).parent().index() == 0 ? prop.transitionEasingException : prop.transitionEasing;

    // リンク先へアニメーション遷移させる
    if(_href && $(_href).length > 0 ) {
      $(_href).animatescroll({
        scrollSpeed: prop.transitionSpeed,
        easing: _ease
      });
    }
  });

  // 画像の遅延読み込み設定
  $(prop.deferredImage).lazyload({
    threshold : 10,
    effect: 'fadeIn',
    effectspeed: 1000
  });

}

function setTargetPostion(_$t){
  prop.dataPossessor = [];
  _$t.each(function(){
    prop.dataPossessor.push($(this).offset().top);
  });
  changeCurrent();
}

function changeCurrent(){
  var _$w = prop.$window,
  _y = _$w.scrollTop() - _$w.height(),
  _dp = prop.dataPossessor,
  _nav = $(prop.mainNavigation).find('li'),
  _cur = replaceString(prop.currentSelector),
  i;

  for( i = 0; i < _dp.length; i++) {
    if( _y < _dp[i]){
      _nav.removeClass(_cur).eq(i).addClass(_cur);
      return;
    }
  }
}

// 要素をウィンドウワイズにあわせる
function fitWindowScale(_$t){
  var _w = window.innerWidth,
  _h = window.innerHeight,
  _$p = _$t.find('.photo');

  _$t.css({
    height: _h
  });

  _$p.css({
    top: _h / 2 - _$p.height() / 2 + 75
  });
}

// 文字列置換処理
function replaceString(_str, _bf, _af, _flg){
  var _reg = new RegExp(_bf || '[\\.#]', _flg || '');
  return _str ? _str.replace(_reg, _af || '') : false;
}

init();

};

jQdm_adjustContent（）;

}）（document，jQuery）;

任何快速反应都将不胜感激!!!谢谢你的时间！

Answer 1

这可能是您正在寻找的那个。 JQuery的addClass（）和removeClass（）

$('#element_to_deactivate').removeClass('active');
$('#element_to_activate').addClass('active');

更改窗口滚动上的导航类无法正常工作

1 个答案: