Question

我一直在尝试创建一个div，当用户滚动到页面底部上方的某个高度时出现该div，然后可以通过单击关闭按钮来关闭它。

为了方便这个div的动画（出现和关闭点击）我使用两个jquery函数：

这是第一个功能：

jQuery(document).ready(function(){
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 900) {
$('.bpop-res').fadeIn();
}
});
});

使div在页面底部上方显示某个高度

这是第二个功能：

jQuery(document).ready(function(){
jQuery('#bpop-close').live('click', function(event) {        
jQuery('.bpop-res').toggle('hide');
});
});

单击按钮关闭div。

虽然这些功能中的每一个都可以在不同的页面上单独运行，但我似乎无法让它们在同一页面上一起工作。

这是一个fiddle with both functions - 您会注意到只有第一个（使div显示在滚动上的函数）有效

这是fiddle with only the close on click function.你会注意到它在这里工作正常。

我对jquery和一般编程都很陌生 - 所以在尝试组合这两个函数时，有没有明显的错误呢？

Answer 1

我认为您的问题是您使用了关键字＆＃39; jquery＆＃39;而不是＆＃39; $＆＃39;。 This fiddle应该适用于这两个功能！

$(document).ready(function () {
    var closed = false;
    $(window).scroll(function () {

        if ($(window).scrollTop() + $(window).height() > $(document).height() - 900) {
            if (closed === false) $('.bpop-res').fadeIn();
        }
    });
    $('#bpop-close').click(function () {
        $('.bpop-res').hide();
        closed = true;
    });
});

我还添加了一个条件，以确保该框在关闭一次后仍保持关闭状态，但您可以根据需要删除它。

Answer 2

将jquery替换为$ ... 将您的代码更改为：

$(document).ready(function(){
    $(window).scroll(function() {
       if($(window).scrollTop() + $(window).height() > $(document).height() - 900) {
           $('.bpop-res').fadeIn();
       }
    });
    $('#bpop-close').click(function(event) {        
         $('.bpop-res').toggle('hide');
    });
});

只需编辑你的JSFiddle ......

Answer 3

您的代码是正确的。只需用$ sign删除jQuery。

$(document).ready(function(){
   $(window).scroll(function() {
       if($(window).scrollTop() + $(window).height() > $(document).height() - 900) {
           $('.bpop-res').fadeIn();
       }
    });
    $('#bpop-close').on('click', function(event) {     //Change .live() to .on()
        alert("hide");
         $('.bpop-res').hide();
    });
});

创建一个出现在页面底部的Div＆amp;使用Jquery关闭单击

3 个答案: