1

ハンドヘルド デバイス用のこの navbar hider スクリプトがあります。

function bindNavUp() {
  var lastScrollTop = 0, delta = 5;
  $(window).on('scroll', function() {
    var st = $(this).scrollTop();

    if(Math.abs(lastScrollTop - st) <= delta) {
      return;
    };

    if (st > lastScrollTop) {
      // downscroll code
      $('header.main').css('top','-50px').hover();
    }
    else {
      // upscroll code
      $('header.main').css('top','0');
    };
    lastScrollTop = st;
  });
};
function unbindNavUp() {
  $(window).unbind('scroll');
};
function handleNavUp() {
  if ($(window).width() < 1600) {
    bindNavUp();
  }
  else {
    unbindNavUp(); 
  };
};
$(document).ready(function() {
  var timer;
  $(window).on('load resize scroll', function() {
    clearTimeout(timer);
    timer = setTimeout(function() {
      handleNavUp();  
    }, 100);
  });
  handleNavUp();
});

これに関する問題は、アップスクロールが Jquery 2.2.1 でうまく機能することです。

https://jsfiddle.net/Lanti/03kw42o1/4/

しかし、Jquery 3 Beta 1 では、ヘッダーの非表示の要素が戻ってきません (最新の Firefox を使用しています)。

https://jsfiddle.net/Lanti/03kw42o1/5/

また、Jquery 3 では多くのコンソール エラーが発生します。TypeError: c is null

Jquery 2.2.1 ではこのようなことはありませんが、どちらの場合も、このスクリプトが私のデザインの通常の非応答ビューに適用されると、パフォーマンスが大幅に低下するように感じます。

4

0 に答える 0