From f1a4c813f8c6d94d62a7a423f55c996be4825dad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=91=A8=E9=97=BB=E7=A5=A5?= <18396581747@163.com>
Date: Fri, 15 Dec 2023 05:44:17 +0000
Subject: [PATCH] =?UTF-8?q?=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 周闻祥 <18396581747@163.com>
---
 .../20231215 \345\244\215\344\271\240.md"     | 60 +++++++++++++++++++
 1 file changed, 60 insertions(+)
 create mode 100644 "21 \345\221\250\351\227\273\347\245\245/20231215 \345\244\215\344\271\240.md"

diff --git "a/21 \345\221\250\351\227\273\347\245\245/20231215 \345\244\215\344\271\240.md" "b/21 \345\221\250\351\227\273\347\245\245/20231215 \345\244\215\344\271\240.md"
new file mode 100644
index 0000000..c1cfed9
--- /dev/null
+++ "b/21 \345\221\250\351\227\273\347\245\245/20231215 \345\244\215\344\271\240.md"	
@@ -0,0 +1,60 @@
+
+
+## 复习：
+
+```js
+
+    // 第二第三都放到另外一个执行函数里面
+    (function () {
+      // 2. 点击页面可以滑动
+      const ul = document.querySelector('.xtx-elevator ul')
+      // 排他思想
+      // 先移除原来的类active
+      // 获取这个active的对象
+      ul.addEventListener('click', function (e) {
+        if (e.target.tagName === 'A' && e.target.dataset.name) {
+          let activer = document.querySelector('.xtx-elevator-list .active')
+          // 判断 如果原来有active类的对象，就移除类，如果开始就没有对象，就不删除，所以不报错
+          if (activer) activer.classList.remove('active')
+          // 当前元素添加 active
+          e.target.classList.add('active')
+          // 获得自定义属性  new   topic
+          let dataName = e.target.dataset.name;
+          // console.log(dataName);
+          // 根据小盒子的自定义属性值 去选择 对应的大盒子
+          let box = document.querySelector(`.xtx_goods_${dataName}`)
+          // 获得对应大盒子的 offsetTop
+          // let x = box.offsetTop
+          // 让页面滚动到对应的位置
+          window.scrollTo(0, box.offsetTop)
+        }
+      })
+
+      // 3. 页面滚动，可以根据大盒子选 小盒子 添加 active 类
+      window.addEventListener('scroll', function () {
+        // 获取4个大盒子
+        const news = document.querySelector('.xtx_goods_new')
+        const popular = document.querySelector('.xtx_goods_popular')
+        const brand = document.querySelector('.xtx_goods_brand')
+        const topic = document.querySelector('.xtx_goods_topic')
+        //  3.1  先移除类
+        // 先获取这个active的对象
+        let activer = document.querySelector('.xtx-elevator-list .active')
+        // 判断 如果原来有active类的对象，就移除类，如果开始就没有对象，就不删除，所以不报错
+        if (activer) activer.classList.remove('active')
+        let x = document.documentElement.scrollTop
+        // 3.2 判断页面当前滑动的位置，选择小盒子
+        //  判断滚动的范围
+        if (x >= news.offsetTop && x < popular.offsetTop) {
+          document.querySelector('.xtx-elevator-list [data-name="new"]').classList.add('active')
+        } else if (x >= popular.offsetTop && x < brand.offsetTop) {
+          document.querySelector('.xtx-elevator-list [data-name="popular"]').classList.add('active')
+        } else if (x >= brand.offsetTop && x < topic.offsetTop) {
+          document.querySelector('.xtx-elevator-list [data-name="brand"]').classList.add('active')
+        } else if (x >= topic.offsetTop) {
+          document.querySelector('.xtx-elevator-list [data-name="topic"]').classList.add('active')
+        }
+      })
+    })();
+```
+
-- 
Gitee