Question

$(".raindrop1").clone().removeClass("raindrop1").addClass("raindropDelete").appendTo("body").css({
  left: $(".shape").position().left - 29.50,
  top: $(".shape").position().top + 1,
  position: "relative"
}).animate({
  top: "+=1000"
}, function() {
  $(".raindropDelete").remove();
});

body {
  background: rgb(0, 0, 0);
}

.shape {
  border-radius: 50px;
  width: 10px;
  height: 10px;
  background-color: white;
  position: absolute;
  left: 50%;
  top: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="shape" onclick="curse()"></div>
<img src='http://images.clipartpanda.com/raindrop-clipart-RTGdn5bTL.png' width="15px" class="raindrop1">

我得到了一些代码，但我似乎无法让它以我想要的方式工作。我想让图像落到屏幕的底部，但是在滚动条出现之前就将其删除。

JS：

$(".raindrop1").clone().removeClass("raindrop1").addClass("raindropDelete").appendTo("body").css({
                left: $(".shape").position().left - 29.50,
                top: $(".shape").position().top + 1,
                position: "relative"
            }).animate({top :"+=1000"}, function() {
                $(".raindropDelete").remove();
            });

HTML：

<div class = "shape" onclick = "curse()"></div>
<img src = 'http://images.clipartpanda.com/raindrop-clipart-RTGdn5bTL.png' width = "15px" class = "raindrop1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

和CSS：

body{
    background: rgb(0, 0, 0);
}

.shape{
    border-radius: 50px;
    width: 10px;
    height: 10px;
    background-color: white;
    position: absolute;
    left: 50%;
    top: 50%;
}

我做错了吗？

JSFiddle

Answer 1

使用此css，您可以将图片粘贴到所有新浏览器的窗口底部

    .fix{
    position:fixed;
    bottom:0px;
    left:50%;
    }
<img src="yourimagepath" class="fix"/>

和IE6你可以使用 position:absolute;而非固定。它会将图像定位在页面底部，但在向上滚动时，图像将随页面一起滚动。不幸的是，IE6中不支持position:fixed

使用此代码，您可以检测用户是否已到达页面底部。您可以在此处添加用于删除图像的代码。如果您将代码放在此处，则当用户到达页面底部时，图像将被自动删除。

window.onscroll = function(ev) {
   if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
    // you're at the bottom of the page
   }
};

Answer 2

您正尝试在动画完成时用于执行某项操作的函数中删除您的Droplet。因此，液滴动画仍然存在，直到它从顶部达到+ 1000px。

要在它低于窗口之前删除，可以使用step方法animate选项。它的作用是观察动画期间发生的事情，如果它落在边缘下方，你可以移除它。

步骤功能

.animate（）的第二个版本提供了一个步骤选项 - 回调   在动画的每一步触发的函数。这个功能是   用于启用自定义动画类型或更改动画   因为它正在发生。它接受两个参数（now和fx），这是   设置为动画的DOM元素。



now：每个步骤动画的属性的数值



fx：对jQuery.fx原型对象的引用，其中包含一个数字   诸如elem之类的属性，用于动画元素，开始和结束   动画属性的第一个和最后一个值，分别和   动画属性的道具。

所以我所做的就是创建一个阶梯函数，每个步骤都会看到是否有液滴到达窗口的边缘。如果满足条件 - 只需移除液滴

＆＃13;

$(".raindrop1").clone()
	.removeClass("raindrop1")
  .addClass("raindropDelete")
  .appendTo("body").css({
     left: $(".shape").position().left - 29.50,
     top: $(".shape").position().top + 1,
     position: "relative"
    })
    .animate({top :"+=100"}, 
             {step: function(now) {
               if (now+50 >= $(window).height())
                $(".raindropDelete").remove();
               }
              },
     function() {});

＆＃13;

body{
    background: rgb(0, 0, 0);
}

.shape{
    border-radius: 50px;
    width: 10px;
    height: 10px;
    background-color: white;
    position: absolute;
    left: 50%;
    top: 50%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "shape" onclick = "curse()"></div>
  <img src = 'http://images.clipartpanda.com/raindrop-clipart-RTGdn5bTL.png' width = "15px" class = "raindrop1">

＆＃13;

Answer 3

您可以使用粘性元素。它们是页面上不会滚动到视图外的元素。换句话说，它粘在可见区域（视口或滚动框）。您可以使用position：sticky;。

创建CSS

[参考：http://www.hongkiat.com/blog/useful-css-tricks-you-might-have-overlooked/]

请查看以下代码以获取示例：

https://codepen.io/rpsthecoder/pen/zGYXEX

HTML：

<h4>Scroll to see the sticky element <em>sticking</em></h4>
<div class="extra"></div>
<br />
<div id="wrapper">
  <div id="sticky">
    sticky
  </div>
</div>
<br />
<div class="extra"></div>

CSS：

#sticky {
  position: sticky;
  background: #F762BC;
  width: 100px;
  height: 100px;
  top: 70px;
  left: 10px;
  display: flex;
  justify-content:center;
  align-items:center;
  box-shadow: 0 0 6px #000;
  text-shadow: 0 0 4px #fff
}

#wrapper {
  width: 75%;
  margin: auto;
  height: 400px;
  background-color: #ccc;
}

.extra{
  background: #ccc;
  width: 75%;
  margin: auto;
  height: 100px;
}

body {
  height: 1000px;
  font-family: georgia;
}
h4{
  text-align: center;
}

如何在窗口底部停止图像？

3 个答案: