Question

我在jquery上做了一个快速模式，这样当我滚动到页面底部时，我会在底部角落弹出一个弹出窗口。基本上我需要让它只在滚动到页面的那一部分时出现，你可以选择关闭它。如何添加近似功能？也可以在滚动到页面的那一部分之前延迟弹出几秒钟。

谢谢！

    <!DOCTYPE html>
<html>
<head>

    <title>Peekaboo</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>


    <style>

    html, body {
        margin: 0;
        padding: 0;
    }
    .content {
        display: block;
        min-height: 3000px;
    }

    .peekaboo {
        position: fixed;
        right: 0;
        bottom: 0;
        display: block;
        width: 200px;
        height: 150px;
        background-color: red;
        -webkit-transition: all 0.6s ease;
        -o-transition: all 0.6s ease;
        -ms-transition: all 0.6s ease;
        transition: all 0.6s ease;
        bottom: -150px;
    }
    .peekaboo.open {
        bottom: 0;
    }
    </style>


    <script>
    $(function() {


        $(window).scroll(function() {

            // calculate the percentage the user has scrolled down the page
            var scrollPercent = ($(window).scrollTop() / $(document).height()) * 100;

            if (scrollPercent > 70) {
                $(".peekaboo").addClass('open');

            }

        });

    });
    </script>

</head>
<body>

    <div class="content">


    </div>

    <div class="peekaboo">
        Peekaboo!
    </div>


</body>
</html>

Answer 1

您可以尝试类似

＆＃13;

$(function() {
  $(window).on('scroll.peekaboo', function() {
    // calculate the percentage the user has scrolled down the page
    var scrollPercent = ($(window).scrollTop() / $(document).height()) * 100;
    if (scrollPercent > 70) {
      //to add a 1 sec delay
      setTimeout(function() {
        $(".peekaboo").addClass('open');
      }, 1000)
    }
  });

  $('.peekaboo .close').click(function() {
    $(".peekaboo").removeClass('open');
    //remove the scroll handler so that the modal won't be shown again on scroll
    $(window).off('scroll.peekaboo');
  })
});

＆＃13;

html,
body {
  margin: 0;
  padding: 0;
}
.content {
  display: block;
  min-height: 3000px;
}
.peekaboo {
  position: fixed;
  right: 0;
  bottom: 0;
  display: block;
  width: 200px;
  height: 150px;
  background-color: red;
  -webkit-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  -ms-transition: all 0.6s ease;
  transition: all 0.6s ease;
  bottom: -150px;
}
.peekaboo.open {
  bottom: 0;
}
.peekaboo .close {
  position: absolute;
  right: 2px;
  top: 5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="content"></div>
<div class="peekaboo">
  Peekaboo! <span class="close">close</span>
</div>

＆＃13;

Answer 2

您可以使用jQuery的delay（）方法结合animate（而不是CSS 3动画）来完成延迟。

您可以在关闭按钮中添加弹出div中的元素并为其指定单击事件。单击它时，您可以在peekaboo div上使用jQuery的hide（）方法来隐藏它（见下文）。

我喜欢使用ID选择器而不是类选择器，因为它们需要更少的DOM遍历。

另外我注意到在我的大显示器上，当浏览器全高时，scrollPercent从未达到70％。你可能会尝试一种不同的方法来检测滚动位置，但我并没有尝试解决这个问题。

<!DOCTYPE html>
<html>
<head>

<title>Peekaboo</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<style>

html, body {
    margin: 0;
    padding: 0;
}
.content {
    display: block;
    min-height: 3000px;
}

.peekaboo {
    position: fixed;
    right: 0;
    bottom: 0;
    display: block;
    width: 200px;
    height: 150px;
    background-color: red;
    bottom: -150px;
}

.open {
    bottom: 0;
}

.closeBtn {
    cursor: pointer;
}

</style>


<script>
$(function() {

    $(window).scroll(function() {

        // calculate the percentage the user has scrolled down the page
        var scrollPercent = ($(window).scrollTop() / $(document).height()) * 100;

        if (scrollPercent > 70) {

            $("#peekaboo").delay('slow').animate({ bottom: 0 });

        }

    });

    $('#close').click(function() {
        $('#peekaboo').hide();
    });
});
</script>

</head>
<body>

<div class="content">

</div>

<div id="peekaboo" class="peekaboo">
    <div id="close" class="closeBtn">Close</div>
    Peekaboo!
</div>

添加Jquery模态关闭按钮

2 个答案: