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也会立即显示（因为顶部的滚动距离超过200px）。我需要做些什么调整才能使其正常工作？

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

任何想法如何解决这个问题？在此先感谢您的帮助。

Answer 1

一旦隐藏了div，我就会向它添加一个类，然后检查该类是否存在于scroll事件处理程序中。试试这个：

$(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处理程序执行fadeIn操作之前，请创建一个布尔值（例如，scroll）并检查该布尔值。

所以，

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();
        }
    }
});

在滚动200px上显示div但在点击时隐藏它

3 个答案: