4

Web ページの上部に位置固定ナビゲーションがあります。Nav にはドロップダウン メニューもあり、下にスライドして、もう一度クリックするまでそのままになります。

私が達成しようとしているのは、サブメニューが開いていて、ユーザーがページを少し下にスクロールすると、サブメニューが自動的に閉じることです。

私が現在持っているものは次のとおりです。

$(document).scroll(function() {

$(".subMenu").slideUp(300);

 });

しかし、この方法はあまり敏感ではなく、わずかなスクロールでドロップダウンを閉じます。

理想的には、300 ピクセル上または下にスクロールした後に、メニュー スライドを元に戻すことができます。これにより、ある種の「バッファ」ルームができます。

4

2 に答える 2

7

jquery を使用$(window).scrollTop()して現在の位置を特定できます。それを示すために簡単な例を作成しました。

var lastFixPos = 0;
var threshold = 200;

$(window).on('scroll', function(){
  var diff = Math.abs($(window).scrollTop() - lastFixPos);
  if(diff > threshold){
    alert('Do something');
    lastFixPos = $(window).scrollTop();
  }
});

thresholdアクションを実行する前に、感度を増減するように変更できます。

于 2013-05-22T20:00:50.390 に答える
1

jQuery がなくても、次のように同じことを実現できます。

var winPos = {
    y: 0,
    yDiff: 0,
    moveY: function(diff) {
      this.yDiff = -(this.y - diff);
      this.y = diff;
    }
};

window.onscroll(function(){
    var threshold = 10;
    winPos.moveY(window.scrollTop);
    // Check against position
    if (winPos.y > threshold) {
        // Do something
    }
    // Check against difference
    if (winPos.yDiff > threshold) {
        // Do something
    }
});
于 2014-07-22T15:58:07.927 に答える