JQuery 实现的页面滚动时浮动窗口控件-前端开发

题目：详细讲解“JQuery 实现的页面滚动时浮动窗口控件”的完整攻略

题目：详细讲解“JQuery 实现的页面滚动时浮动窗口控件”的完整攻略

介绍

JQuery是一种流行的JavaScript库，它使用极简的风格使DOM操作变得容易。JQuery还提供了许多插件，可以帮助我们轻松地实现一些常见的 Web 功能。其中就包括页面滚动时浮动窗口控件。

准备工作

在实现这个控件之前，我们需要准备一些前置工作。首先，需要引入JQuery的库文件，可以通过以下方式来引入：

<script src="//cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

接着，需要准备好页面上的 HTML 结构。浮动窗口可以放到一个

容器内，这个容器可以有一个固定的类名，如下所示：

<div class="fixed_container">
  <div class="fixed_content">
    浮动内容
  </div>
</div>

实现方式

1. 监听窗口滚动事件

$(window).scroll(function() {
  //恢复原位
  $('.fixed_container').css({
      'position': 'static',
      'top': '',
      'left': '',
      'right': ''
  });

  //锁定顶部
  if ($(window).scrollTop() > $('.fixed_container').offset().top) {
      $('.fixed_container').css({
          'position': 'fixed',
          'top': 0,
          'left': $('.fixed_container').offset().left,
          'right': $('.fixed_container').offset().right
      });
  }
});

上述代码简单地监听了窗口滚动事件，当页面滚动到浮动容器的位置时，把浮动容器绝对定位，并将其位置固定在屏幕上。

注意：这里通过一个if语句判断滚动距离是否超过了特定元素的位置，以此来确定浮动容器是否需要固定在屏幕上。

2. 使用position:sticky

CSS3提供了一个新的布局方式，即 position:sticky。它允许元素在滚动时停留在其所在容器的顶部或底部。我们可以使用 position:sticky 来实现我们想要的功能。

.fixed_container {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

上述CSS样式表示，浮动容器具有sticky定位，即不会在页面滚动时消失，但是仅限于它所在的容器。同时把容器的顶部固定在页面顶部。

示范代码

示例1

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>页面滚动时浮动窗口控件</title>
  <style>
    body {
      height: 1500px;
      text-align: center;
    }
    .fixed_container {
      width: 200px;
      height: 100px;
      background-color: red;
      margin: 50px auto;
      text-align: center; 
    }
    .fixed_content {
      margin-top: 30px;
    }
  </style>
</head>
<body>
  <div class="fixed_container">
    <div class="fixed_content">
      固定我的容器到页面顶部
    </div>  
  </div>

  <script src="//cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script>
    /*方案1*/
    $(window).scroll(function() {
        //恢复原位
        $('.fixed_container').css({
            'position': 'static',
            'top': '',
            'left': '',
            'right': ''
        });

        //锁定顶部
        if ($(window).scrollTop() > $('.fixed_container').offset().top) {
            $('.fixed_container').css({
                'position': 'fixed',
                'top': 0,
                'left': $('.fixed_container').offset().left,
                'right': $('.fixed_container').offset().right
            });
        }
    });
  </script>
</body>
</html>

示例2

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>页面滚动时浮动窗口控件</title>
  <style>
    body {
      height: 1500px;
      text-align: center;
    }
    .fixed_container {
      width: 200px;
      height: 100px;
      background-color: red;
      margin: 50px auto;
      text-align: center; 
      /*方案2*/
      position: -webkit-sticky;
      position: sticky;
      top: 0;
    }
    .fixed_content {
      margin-top: 30px;
    }
  </style>
</head>
<body>
  <div class="fixed_container">
    <div class="fixed_content">
      固定我的容器到页面顶部
    </div>  
  </div>

  <script src="//cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>

通过上述示例，我们可以轻松地实现页面滚动时浮动窗口控件。同时也可以发现，实现方法有两种：一种是通过JQuery实现监听窗口滚动事件；另一种是通过CSS3的position:sticky实现固定在容器顶部。最终的实现效果是相同的。