原生JS和jquery实现滚动条滑动到某位置实现某效果

最新推荐文章于 2024-04-17 11:59:13 发布

好记性真不如烂笔头

最新推荐文章于 2024-04-17 11:59:13 发布

阅读量181

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/m0_46581222/article/details/119459001

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

工作记录

JS：

主要方法：onscroll 和scrollTop
范围：监控浏览器窗口或者某一元素的滚动(这里是监控浏览器窗口)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #sss {
      overflow: hidden;
      background: red;
    }
    li{
      list-style: none;
      height: 200px;
    }
  </style>
  <script>
    window.onload = function () {
      document.body.onscroll = function () {
        //滚动对象是窗口时
        let height = document.body.scrollTop || document.documentElement.scrollTop;
        if (height > 500) {
          document.querySelector('#sss').style.background = 'yellow'
        } else {
          document.querySelector('#sss').style.background = 'red'
        }
      }
    }
  </script>
</head>
<body>
<div id="sss">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
</div>
</body>
</html>

jquery

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #sss {
      overflow: hidden;
      background: red;
    }

    li {
      list-style: none;
      height: 200px;
    }
  </style>
  <script src="../jquery.min.js"></script>
  <script>
    window.onload = function () {
      $(window).scroll(function () {
        let height = $(window).scrollTop();
        if (height > 300) {
          $('#sss').css('background', 'yellow')
        } else {
          $('#sss').css('background', 'red')
        }
      })

    }
  </script>

</head>
<body>
<div id="sss">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
</div>
</body>
</html>