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定位，最好在全屏幕中尝试该示例 - 点击“完整页面”按钮即可执行此操作。

还有一个更新的jsFiddle，可以显示此代码：https://jsfiddle.net/mgaskill/poss9x4o/

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

接下来，我们将“关闭”按钮添加为一个带有“X”的简单跨度，并自定义跨度样式以使其看起来像一个关闭按钮。这包括放置hover样式，以便向用户直观地指示这是一个活动元素。

横幅的样式会略微修改，以使横幅保持可见，但在屏幕外，可以使“幻灯片”效果工作，而不必担心切换显示。横幅的初始right位置现在为-340px，这将使横幅完全脱离屏幕（基于其宽度。

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

关闭按钮处理程序会快速将横幅向右滑动，将其隐藏起来。此外，卸载关闭按钮单击处理程序（清理），并从标题中删除popout类。

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

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

1 个答案: