diff --git "a/23 \351\231\210\346\254\243\345\250\201/20231214 \345\244\215\344\271\240.md" "b/23 \351\231\210\346\254\243\345\250\201/20231214 \345\244\215\344\271\240.md"
new file mode 100644
index 0000000000000000000000000000000000000000..9519a4f62c5c8abfc99c42aa979bd204e151906d
--- /dev/null
+++ "b/23 \351\231\210\346\254\243\345\250\201/20231214 \345\244\215\344\271\240.md"	
@@ -0,0 +1,112 @@
+1.滚轮scrolltop还有offsettop
+
+<a href="https://sm.ms/image/1rNMWXSvVBLCoH7" target="_blank"><img src="https://s2.loli.net/2023/12/14/1rNMWXSvVBLCoH7.png" ></a>
+
+window.scrollTo(0,0)   滚动到指定位置
+
+```js
+document.documentElement.scrollTop = 800
+```
+
+如果是固定值就动不了滚动条了
+
+clientWith 包括盒子本身的宽度,+ padding,不含边框
+
+clientHeight包括盒子本身的高度,+ padding,不含边框
+
+offsetWidth 包括盒子本身+padding，含边框
+
+document.documentElement.scrollTop 指的页面被卷了多少
+
+resize 尺寸改变事件对象可以是window 也可以是具体的对象元素
+
+window 指的是整个窗口对象
+
+###### 
+
+
+
+
+
+```js
+// 用立即执行函数可以避免变量的污染。充分复用作用域
+    (function () {
+      // 第一大模块，页面滑动可以显示和隐藏
+      // 获取元素
+      const xtxEntry = document.querySelector('.xtx_entry')
+      // 1. 当页面滚动大于 300像素，就显示 电梯导航
+      // 2. 给页面添加滚动事件
+      window.addEventListener('scroll', function (e) {
+        let x = document.documentElement.scrollTop
+        // console.log(x);
+        if (x >= 300) {
+          // 被卷去的头部大于 300
+          document.querySelector('.xtx-elevator').style.opacity = 1
+        } else {
+          document.querySelector('.xtx-elevator').style.opacity = 0
+        }
+        // 点击返回页面顶部
+        document.querySelector('#backTop').addEventListener('click', function () {
+          window.scrollTo(0, 0)
+        })
+      })
+    })();
+
+
+
+
+
+    // 第二第三都放到另外一个执行函数里面
+    (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')
+        }
+      })
+    })();
+```
+