当窗口从顶部滚动一定距离时div淡入 | 当窗口从顶部滚动一定距离时div淡入

本文介绍了当窗口从顶部滚动一定距离时div淡入的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的< head> 标记中有以下脚本，当窗口为150px时，它会动画我的 div 从底部。我不知道如何改变它，所以它在距离顶端一定距离时动画。

 < script> 
 $（window）.scroll（function（）{
 if（$（window）.scrollTop（）+ $（window）.height（）== $（document）.height（） -  150 ）{
 isShown = true; 
 $（'。footer-btn'）。fadeIn（500）; 
} else {
 $（'。footer-btn'）。 fadeOut（500）; 
} 
}）; 
< / script>

解决方案

这是一个jQuery脚本，

更改 offset（）的值以控制淡入激活位置。

  jQuery（document）.ready（function（$）{//浏览器窗口滚动位置（以像素为单位）按钮将出现的位置//调整此数字以在按钮出现在向下滚动时选择var offset = 200，//动画持续时间（以毫秒为单位）scroll_top_duration = 700，// bind with （）。（$（this）.scrollTop（）> offset）？$ animation.addClass（） （'visible'）：$ animation.removeClass（'visible'）;}）;}）;

  #container {height：800px;}＃button {border：1px solid black;填充：10px;宽度：100px; text-align：center; background-color：chartreuse;}。animation {position：fixed;底部：25px; right：25px;不透明度：0; transition：不透明度.3s 0s，visibility 0s .3s;}。visible {visibility：visible; / *该按钮变得可见* / opacity：1;}

< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< div id =container> < p> SCROLL DOWN< / p> < a id =buttonclass =animation> BUTTON< / a>< / div>

I have the following script in my <head> tag which animates my div when the window is 150px from the bottom. I am not sure how to alter it so it animates when a certain distance from the top.

<script>
  $(window).scroll(function() {
  if($(window).scrollTop() + $(window).height() == $(document).height()-150){
  isShown = true;
  $('.footer-btn').fadeIn(500);
  }else{
  $('.footer-btn').fadeOut(500);
  }
  });
</script>

解决方案

Here's a jQuery script that I use in a site to set the animation from the top.

Change the value of offset() to control the fade-in activation position.

jQuery(document).ready(function($) {

  // browser window scroll position (in pixels) where button will appear
  // adjust this number to select when your button appears on scroll-down
  var offset = 200,

    // duration of the animation (in ms)
    scroll_top_duration = 700,

    // bind with the button link
    $animation = $('.animation');

  // display or hide the button
  $(window).scroll(function() {
    ($(this).scrollTop() > offset) ? $animation.addClass('visible'):
      $animation.removeClass('visible');
  });

});

#container {
  height: 800px;
}
#button {
  border: 1px solid black;
  padding: 10px;
  width: 100px;
  text-align: center;
  background-color: chartreuse;
}
.animation {
  position: fixed;
  bottom: 25px;
  right: 25px;
  opacity: 0;
  transition: opacity .3s 0s, visibility 0s .3s;
}
.visible {
  visibility: visible;  /* the button becomes visible */
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <p>SCROLL DOWN</p>
  <a id="button" class="animation">BUTTON</a>
</div>

http://jsfiddle.net/zmz6g8kh/4/

这篇关于当窗口从顶部滚动一定距离时div淡入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！