指定の場所になったら追従する要素が、時々指定した場所と違うところから追従してしまう。

この現象はごくたまに起きるのですが、原因を知りたいです。

ある要素Aの位置にスクロールが来たら、その要素の隣に配置してある要素A-aを追従させ、
次の指定の要素Bの位置まで来たら、次の要素B-aを追従させるようにしてあります。
しかし、たまに要素A-aと要素B-aの追従位置が、上にずれてしまいます。（200pxくらい）

少し早く追従してしまうので、.offset().topが関係しているのかなと思いましたが、
私には解決能力がなく、お力を借りたいです。
どうぞよろしくお願いします。

コードは以下です。


    var nav1 = jQuery('#fiximg_1');
    var nav2 = jQuery('#fiximg_2');

    var offsetImg1 = jQuery('.fixtext-1').offset().top;
    var offsetImg2 = jQuery('.fixtext-2').offset().top;

    var fixImg1 = function() {
        if (jQuery(window).scrollTop() > offsetImg1) {
            nav1.addClass('fixed');
        } else {
            nav1.removeClass('fixed');
        }
    }
    var fixImg2 = function() {
        if (jQuery(window).scrollTop() > offsetImg2) {
            nav2.addClass('fixed');
            nav1.removeClass('fixed');
        } else {
            nav2.removeClass('fixed');
        }
    }

    jQuery(window).scroll(fixImg1);
    jQuery(window).scroll(fixImg2);

行動規範の内容に同意します

回答1件

ベストアンサー

動作検証していないので、なんともいえないですが、、、

javascript
1jQuery(window).scroll(fixImg1);
2jQuery(window).scroll(fixImg2);

ここで、スクロールした時の処理を、
二個連続で書いているのが原因だと思います。

スクロール時の処理は一個にして、
スクロール量によって、実行処理を変える、という風にするのはいかがでしょうか？

javascript
1jQuery(window).scroll(function(){
2  if (jQuery(window).scrollTop() > offsetImg1 && jQuery(window).scrollTop() <= offsetImg2) {
3    nav1.addClass('fixed');
4  } else if (jQuery(window).scrollTop() > offsetImg2) {
5    nav2.addClass('fixed');
6    nav1.removeClass('fixed');
7  } else {
8    nav1.removeClass('fixed');
9    nav2.removeClass('fixed');
10  }
11});