javascript - 向下滚动时如何创建一个小窗口？

Question

我需要创建一个小窗口，当我向下滚动一定数量的像素时它会出现。

一个例子可以是seen here ，但有时窗口不显示，所以我也给你一个screen shot捕获示例。

向下滚动到底部时，您会看到一个小窗口从右侧弹出。我需要完全按照第一个链接执行此操作(使用关闭按钮和所有按钮)。

这是我已经编写的用于创建窗口的内容:

 var amountScrolled2 = 3000;

$(window).scroll(function() {
  if ( $(window).scrollTop() > amountScrolled2 ) {
    $('div.banner').fadeIn('slow');
  } else {
    $('div.banner').fadeOut('slow');
  }
});

div.banner {
  display: none;
  width: 300px;
  height: 400px;
  background-color:white;
  position: fixed;
  z-index: 999;
  right: 0px;
  bottom: 120px;
  text-align: center;
  padding: 0;
  border:1px solid #ddd;
  border-right:none;
  padding:20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="banner hidden-xs">
        <h3 style="color:black;font-size:22px;"><span class="blink"><b>DID YOU READ THIS?</b></span></h3>
        <h3 style="color:black;text-align:left;font-size:20px;">New Cat Specie Found!</h3>
        <p style="color:black;text-align:left;"><i class="fa fa-quote-left fa-pull-left fa-border" aria-hidden="true"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat... <a href="" style="color:black;">READ MORE</a></p>
        <p style="text-align:left;"><img src="images/professor1.jpg" class="img-circle" width="25" height="25"> John Wotson. Professor,<br>University of Moratuwa.</p>
      
    </div>

我还想添加一个 close 按钮，而不是淡入淡出，我希望窗口从右侧打开/关闭。如果用户单击关闭按钮，无论滚动位置如何，横幅横幅都应保持隐藏状态，并保持隐藏状态直到页面刷新。如果用户向上滚动，当到达阈值滚动位置时，横幅应该自动隐藏，并且如果用户向下滚动，仍然能够再次显示。

根据我已有的工作，我该怎么做？

Answer 1

根据您的 jsFiddle 示例，我添加了您询问的功能。下面的代码展示了它是如何工作的:

var amountScrolled2 = 300;
var bannerClosed = false;
var banner = $('div.banner');
var close = $("span#close");

$(window).scroll(function() {
    if (!bannerClosed && !banner.hasClass('popout') && $(window).scrollTop() > amountScrolled2) {
    	banner.addClass('popout');
        banner.animate({
            right: 0
        }, {
            duration: 'slow',
            complete: function() {
                close.click(function() {
                    bannerClosed = true;
                	closeBanner();
                });
	        }
    	});
    } else if (banner.hasClass('popout') && $(window).scrollTop() < amountScrolled2) {
    	closeBanner();
    }
});

function closeBanner() {
    banner.animate({ right: -340 }, 'fast');
    $(this).unbind("click");
    banner.removeClass('popout');
}

div.banner {
  width: 300px;
  height: 400px;
  background-color:white;
  position: fixed;
  z-index: 999;
  right: -340px;
  bottom: 120px;
  text-align: center;
  padding: 0;
  border:1px solid #ddd;
  border-right:none;
  padding:20px;
}

div.banner > span#close {
    position: absolute;
    left: 0;
    top: 0;
    padding: 5px;
    color: red;
}

div.banner > span#close:hover {
    background-color: red;
    color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>
sasasasas
</p>
<p>
sasasasas
</p>
<p>
sasasasas
</p>
<p>
sasasasas
</p>
<p>
sasasasas
</p>
<p>
sasasasas
</p>
<p>
sasasasas
</p>
<p>
sasasasas
</p>
<p>
sasasasas
</p>
<p>
sasasasas
</p><p>
sasasasas
</p><p>
sasasasas
</p><p>
sasasasas
</p><p>
sasasasas
</p><p>
sasasasas
</p><p>
sasasasas
</p><p>
sasasasas
</p><p>
sasasasas
</p><p>
sasasasas
</p><p>
sasasasas
</p><p>
sasasasas
</p><p>
sasasasas
</p><p>
sasasasas
</p><p>
sasasasas
</p><p>
sasasasas
</p><p>
sasasasas
</p><p>
sasasasas
</p><p>
sasasasas
</p><p>
sasasasas
</p><p>
sasasasas
</p><p>
sasasasas
</p><p>
sasasasas
</p><p>
sasasasas
</p><p>
sasasasas
</p>
<div class="banner hidden-xs">
        <span id="close">X</span>
        <h3 style="color:black;font-size:22px;"><span class="blink"><b>DID YOU READ THIS?</b></span></h3>
        <h3 style="color:black;text-align:left;font-size:20px;">New Cat Specie Found!</h3>
        <p style="color:black;text-align:left;"><i class="fa fa-quote-left fa-pull-left fa-border" aria-hidden="true"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat... <a href="" style="color:black;">READ MORE</a></p>
        <p style="text-align:left;"><img src="images/professor1.jpg" class="img-circle" width="25" height="25"> John Wotson. Professor,<br>University of Moratuwa.</p>

</div>

鉴于 banner 使用的是 fixed 定位，最好在全屏模式下尝试该示例 - 单击“Full Page”按钮执行此操作。

还有一个更新的 jsFiddle 显示了这段代码的运行情况:https://jsfiddle.net/mgaskill/poss9x4o/

这是如何实现的？涉及几个步骤。首先，重要的是要确保效果不会在效果已经发生时发生，因为效果的异步性质意味着每个滚动事件都会有效地中断(或交错)效果。我们使用 popout 类来指示横幅已弹出，并且对用户可见。

接下来，我们将“关闭”按钮添加为一个带有“X”的简单跨度，并自定义跨度样式，使其外观和行为都像一个关闭按钮。这还包括放置 hover 样式，以直观地向用户表明这是一个事件元素。

横幅的样式稍作修改，使横幅可见，但在屏幕外，使“幻灯片”效果起作用，而不必担心切换显示。横幅的初始 right 位置现在是 -340px，这将使横幅完全离开屏幕(基于其宽度。

之后，我们处理事件。一旦横幅“安全”部署，我们使用 jQuery animate方法将元素的右侧从其初始位置过渡到“0”，这实际上是从屏幕右侧滑动横幅。一旦横幅可见，我们就会为关闭按钮安装点击处理程序。

关闭按钮处理程序将快速向右滑动横幅，将其隐藏。此外，关闭按钮单击处理程序已卸载(清理)，popout 类已从横幅中删除。

如果在显示横幅时页面向上滚动，则横幅将再次隐藏，直到页面向下滚动。达到阈值所需的滚动量在 amountScrolled2 变量中设置。如果用户通过单击“X”关闭横幅，则在刷新页面之前，横幅将不再通过滚动显示。