在滾動200px時顯示div，但在單擊時將其隱藏

Question

我有一個div元素#offer，默認情況下是隱藏的，並且在從頂部滾動200px時顯示，一旦用戶再次向上滾動，div就會被隱藏。

以下代碼可以正常執行此操作：

$(document).scroll(function () {
    var y = $(this).scrollTop();   
    if (y > 100) {
        $('#offer').fadeIn();
    } else {
        $('#offer').fadeOut();
    }
});

我想添加一個選項，只需單擊＃hide-now div即可手動隱藏div 。 我試圖使用以下代碼。 即使這隱藏了div #offer，該div仍會立即再次顯示（因為從頂部開始的滾動距離超過200像素）。 我需要對代碼進行哪些調整才能使其正常工作？

$(document).ready(function() {
$("#hide-now").live('click', function () { 
$("#offer").slideUp("slow");
});
}); 

任何想法如何解決這個問題？ 在此先感謝您的幫助。

Answer 1

一旦將其隱藏，我將向div添加一個類，然后檢查滾動事件處理程序中是否存在該類。 試試看：

$(document).ready(function() {
  $("#hide-now").live('click', function () { 
    $("#offer").slideUp("slow").addClass("manually_hidden");;
  });
}); 

然后在滾動處理程序中：

$(document).scroll(function () {
  var y = $(this).scrollTop();   
  if (!$("#offer").hasClass("manually_hidden")) {
    if (y > 100) {
        $('#offer').fadeIn();
    } else {
        $('#offer').fadeOut();
    }
  }
});   

希望這可以幫助！ 另外，我同意使用其他注釋來避免使用.live-.on或僅使用.click應該這樣做。

Answer 2

因此，創建一個布爾值（例如show ）並在執行scroll處理程序的fadeIn操作之前檢查該布爾值。

所以，

var show = true;
$(document).scroll(function () {
    var y = $(this).scrollTop();   
    if (y > 100) {
      if(show){
        $('#offer').fadeIn();
      }
    } else {
        $('#offer').fadeOut();
    }
});

然后，如果他們click ，

$(document).ready(function() {
  $("#hide-now").live('click', function () { 
    $("#offer").slideUp("slow");
    show = false;
  });
}); 

與其他應用程序一樣，我建議使用on而不是live 。

Answer 3

手動隱藏#offer（例如，帶有類）時設置標志：

$(function() {
    $("#hide-now").on('click', function () { 
        $("#offer").slideUp("slow").addClass('hidden');
    });
});

然后檢查標志：

$(document).scroll(function () {
    var y = $(this).scrollTop();   
    if ( ! $(this).hasClass('hidden') ) {
        if (y > 100) {
            $('#offer').fadeIn();
        } else {
            $('#offer').fadeOut();
        }
    }
});