DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面加载事件title>
<script>
/* // 等待页面所有资源加载完毕,就回去执行回调函数
window.addEventListener('load', function () {
const btn = document.querySelector('button')
btn.addEventListener('click', function () {
alert(11)
})
})
// 也可以针对某个资源绑定load事件,比如某个图很大,加载得很慢
// 可以不用非得写window
img.addEentListener('load',function() {
// 等待图片加载完毕,再去执行里面的代码
}) */
// 初始的html文档,如标签等加载完成之后
document.addEventListener('DOMContentLoaded', function () {
const btn = document.querySelector('button')
btn.addEventListener('click', function () {
alert(11)
})
})
script>
head>
<body>
<button>点击button>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面滚动事件title>
<style>
body {
padding-top: 100px;
height: 6666px;
}
div {
display: none;
margin: 100px;
/* overflow: hidden/auto/scroll */
overflow: scroll;
/* h200+w200+bd */
height: 200px;
width: 200px;
border: 1px solid #000;
}
style>
head>
<body>
<div>
茉莉荔枝冰柠水
茉莉荔枝冰柠水
茉莉荔枝冰柠水
茉莉荔枝冰柠水
茉莉荔枝冰柠水
茉莉荔枝冰柠水
茉莉荔枝冰柠水
茉莉荔枝冰柠水
茉莉荔枝冰柠水
茉莉荔枝冰柠水
茉莉荔枝冰柠水
茉莉荔枝冰柠水
茉莉荔枝冰柠水
茉莉荔枝冰柠水
茉莉荔枝冰柠水
茉莉荔枝冰柠水
茉莉荔枝冰柠水
茉莉荔枝冰柠水
茉莉荔枝冰柠水
茉莉荔枝冰柠水
茉莉荔枝冰柠水
茉莉荔枝冰柠水
茉莉荔枝冰柠水
茉莉荔枝冰柠水
茉莉荔枝冰柠水
div>
<script>
const div = document.querySelector('div')
// 页面滚动事件
window.addEventListener('scroll', function () {
// console.log('我滚了');
// 想知道页面到底滚动了多少像素,被卷去了多少 scrollTop
// 获取html元素的写法
// document.documentElement
// console.log(document.documentElement.scrollTop)
// 大于等于100的时候显示,小于100的时候隐藏
const n = document.documentElement.scrollTop
if (n >= 100) {
div.style.display = 'block'
} else {
div.style.dispaly = 'none'
}
})
/* const div = document.querySelector('div')
div.addEventListener('scroll', function () {
// console.log(111)
// scrollTop被卷去的头部
console.log(div.scrollTop)
}) */
script>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>scrollTop细节title>
<style>
body {
height: 3000px;
}
style>
head>
<body>
<script>
// 赋值的时候不带单位 800
// 可读写就是可取值也能赋值
document.documentElement.scrollTop = 800
window.addEventListener('scroll', function () {
// 在scroll事件里面获取被卷去的距离 如果写在外面就不能保证每滑动一段距离就改变一次值
const n = document.documentElement.scrollTop
// 得到的是什么数据? 数字型 不带单位
console.log(n)
})
script>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小兔鲜儿 - 新鲜 惠民 快捷!title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/index.css">
head>
<body>
<div class="xtx_topnav">
<div class="wrapper">
<ul class="xtx_navs">
<li>
<a href="javascript:;">请先登录a>
li>
<li>
<a href="javascript:;">免费注册a>
li>
<li>
<a href="javascript:;">我的订单a>
li>
<li>
<a href="javascript:;">会员中心a>
li>
<li>
<a href="javascript:;">帮助中心a>
li>
<li>
<a href="javascript:;">在线客服a>
li>
<li>
<a href="javascript:;">
<i class="mobile sprites">i>
手机版
a>
li>
ul>
div>
div>
<div class="xtx_header">
<div class="wrapper">
<h1 class="xtx_logo"><a href="/">小兔鲜儿a>h1>
<div class="xtx_navs">
<ul class="clearfix">
<li>
<a href="javascript:;">首页a>
li>
<li>
<a href="javascript:;">生鲜a>
li>
<li>
<a href="javascript:;">美食a>
li>
<li>
<a href="javascript:;">餐厨a>
li>
<li>
<a href="javascript:;">电器a>
li>
<li>
<a href="javascript:;">居家a>
li>
<li>
<a href="javascript:;">洗护a>
li>
<li>
<a href="javascript:;">孕婴a>
li>
<li>
<a href="javascript:;">服装a>
li>
ul>
div>
<div class="xtx_search clearfix">
<a href="javascript:;" class="xtx_search_cart sprites">
<i>2i>
a>
<div class="xtx_search_wrapper">
<input type="text" placeholder="搜一搜">
div>
div>
div>
div>
<div class="xtx_entry">
<div class="wrapper">
<div class="xtx_category">
<ul class="xtx_category_super">
<li>
<a href="javascript:;">
生鲜
<small>水果small>
<small>蔬菜small>
a>
<i class="sprites">i>
li>
<li class="active">
<a href="javascript:;">
美食
<small>面点small>
<small>干果small>
a>
<i class="sprites">i>
li>
<li>
<a href="javascript:;">
电器
<small>数码产品small>
a>
<i class="sprites">i>
li>
<li>
<a href="javascript:;">
居家
<small>床品small>
<small>四件套small>
<small>被枕small>
a>
<i class="sprites">i>
li>
<li>
<a href="javascript:;">
洗护
<small>洗发洗护small>
<small>美妆small>
a>
<i class="sprites">i>
li>
<li>
<a href="javascript:;">
孕婴
<small>奶粉small>
<small>玩具small>
<small>辅食small>
a>
<i class="sprites">i>
li>
<li>
<a href="javascript:;">
餐橱
<small>数码产品small>
a>
<i class="sprites">i>
li>
<li>
<a href="javascript:;">
服饰
<small>女装small>
<small>男装small>
a>
<i class="sprites">i>
li>
<li>
<a href="javascript:;">
杂货
<small>户外small>
<small>图书small>
a>
<i class="sprites">i>
li>
<li>
<a href="javascript:;">
品牌
<small>品牌制造small>
a>
<i class="sprites">i>
li>
ul>
<div class="xtx_category_subset">
div>
div>
<div class="xtx_banner">
<ul>
<li>
<a href="javascript:;">
<img src="./uploads/banner_1.png" alt="">
a>
li>
ul>
<a href="javascript:;" class="prev sprites">a>
<a href="javascript:;" class="next sprites">a>
<div class="indicator">
<span>span>
<span>span>
<span class="active">span>
<span>span>
<span>span>
div>
div>
div>
div>
<div class="xtx_goods_new xtx_panel">
<div class="wrapper">
<div class="xtx_panel_header">
<h3>新鲜好物<small>新鲜出炉 品质靠谱small>h3>
<a href="javascript:;" class="more">
查看全部<i class="sprites">i>
a>
div>
<div class="xtx_panel_goods_1">
<a href="javascript:;">
<img src="./uploads/new_goods_1.jpg" alt="">
<span class="name">睿米无线吸尘器F8span>
<span class="price"><small>¥small>899span>
a>
<a href="javascript:;">
<img src="./uploads/new_goods_2.jpg" alt="">
<span class="name">智能环绕3D空调span>
<span class="price"><small>¥small>1299span>
a>
<a href="javascript:;">
<img src="./uploads/new_goods_3.jpg" alt="">
<span class="name">广东软软糯米煲仔饭span>
<span class="price"><small>¥small>129span>
a>
<a href="javascript:;">
<img src="./uploads/new_goods_4.jpg" alt="">
<span class="name">罗西机械智能手表span>
<span class="price"><small>¥small>3399span>
a>
div>
div>
div>
<div class="xtx_goods_popular xtx_panel">
<div class="wrapper">
<div class="xtx_panel_header">
<h3>人气推荐<small>人气爆款 不容错过small>h3>
div>
<div class="xtx_panel_goods_1">
<a href="javascript:;">
<img src="./uploads/popular_1.jpg">
<span class="title">特惠推荐span>
<span class="alt">我猜得到 你的需要span>
a>
<a href="./index-hot.html">
<img src="./uploads/popular_2.jpg">
<span class="title">爆款推荐span>
<span class="alt">人气好物推荐span>
a>
<a href="./index-one.html">
<img src="./uploads/popular_3.jpg">
<span class="title">场景使用一站买全span>
<span class="alt">编辑精心整理推荐span>
a>
<a href="javascript:;">
<img src="./uploads/popular_4.jpg">
<span class="title">领券中心span>
<span class="alt">发现更多超值优惠券span>
a>
div>
div>
div>
<div class="xtx_goods_brand xtx_panel">
<div class="wrapper">
<div class="xtx_panel_header">
<h3>热门品牌<small>国际经典 品质保证small>h3>
<div class="page-bar">
<a href="javascript:;" class="prev sprites">a>
<a href="javascript:;" class="next sprites active">a>
div>
div>
<div class="xtx_goods">
<ul>
<li>
<a href="./index-brand.html">
<img src="./uploads/brand_goods_1.jpg" alt="">
a>
<a href="./brand-list.html">
<img src="./uploads/brand_goods_2.jpg" alt="">
a>
<a href="javascript:;">
<img src="./uploads/brand_goods_3.jpg" alt="">
a>
<a href="javascript:;">
<img src="./uploads/brand_goods_4.jpg" alt="">
a>
<a href="javascript:;">
<img src="./uploads/brand_goods_5.jpg" alt="">
a>
li>
ul>
div>
div>
div>
<div class="xtx_goods_category xtx_panel">
<div class="wrapper">
<div class="xtx_panel_header">
<h3>生鲜h3>
<a href="javascript:;" class="more">
查看全部<i class="sprites">i>
a>
<div class="tabs-bar">
<a href="javascript:;" class="active">水果a>
<a href="javascript:;">蔬菜a>
<a href="javascript:;">肉禽蛋a>
<a href="javascript:;">裤装a>
<a href="javascript:;">衬衫a>
<a href="javascript:;">内衣a>
div>
div>
<div class="xtx_panel_goods_2">
<ul class="clearfix">
<li>
<a href="javascript:;">
<img src="./uploads/fresh_goods_cover.jpg" alt="">
a>
<div class="label">
<span>生鲜馆span>
<span>全场3件8折span>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/fresh_goods_1.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">美威 智利原味三文鱼排 240g/袋 4片装p>
<p class="flag">海鲜年货p>
<p class="price"><small>¥small>59p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/fresh_goods_2.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">红功夫 麻辣小龙虾1.5kg 4-6钱/25-32只p>
<p class="flag">火锅食材p>
<p class="price"><small>¥small>71.9p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/fresh_goods_3.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">三都港 冷冻无公害黄花鱼 700g 2条 袋装p>
<p class="flag">海鲜水产p>
<p class="price"><small>¥small>49.9p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/fresh_goods_4.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">渔公码头 大连鲜食入味 即食海参 辽参刺参 调味海p>
<p class="flag">海鲜年货p>
<p class="price"><small>¥small>899p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/fresh_goods_5.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">越南进口白心火龙果4个 装 标准果 单果400-550g p>
<p class="flag">p>
<p class="price"><small>¥small>29p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/fresh_goods_6.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">广西沃柑 柑橘1.5kgp>
<p class="flag">新鲜水果p>
<p class="price"><small>¥small>59p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/fresh_goods_7.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">进口 牛油果 6个装 单果重约130-180gp>
<p class="flag">新鲜水果p>
<p class="price"><small>¥small>39.9p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/fresh_goods_8.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">泰国进口山竹5A级 500g p>
<p class="flag">新鲜水果p>
<p class="price"><small>¥small>29.9p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
ul>
div>
<div class="xtx_panel_header">
<h3>服饰h3>
<a href="javascript:;" class="more">
查看全部<i class="sprites">i>
a>
<div class="tabs-bar">
<a href="javascript:;" class="active">行李箱a>
<a href="javascript:;">男士包袋a>
<a href="javascript:;">女士包袋a>
<a href="javascript:;">钱包及小提袋a>
<a href="javascript:;">男鞋a>
<a href="javascript:;">女鞋a>
<a href="javascript:;">拖鞋a>
div>
div>
<div class="xtx_panel_goods_2">
<ul class="clearfix">
<li>
<a href="javascript:;">
<img src="./uploads/clothes_goods_cover.jpg" alt="">
a>
<div class="label">
<span>服饰馆span>
<span>3折狂欢span>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/clothes_goods_1.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">人本秋季厚底帆布鞋 韩版低帮增高学生p>
<p class="flag">p>
<p class="price"><small>¥small>55p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/clothes_goods_2.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">迪士尼真皮针扣表带宽度 14-16mm规格双色压纹 女表带p>
<p class="flag">海鲜年货p>
<p class="price"><small>¥small>20.9p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/clothes_goods_3.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">三都港 冷冻无公害黄花鱼 700g 2条 袋装p>
<p class="flag">海鲜水产p>
<p class="price"><small>¥small>209p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/clothes_goods_4.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">ONLY夏季新款高腰宽松 七分阔腿裙裤休闲裤p>
<p class="flag">p>
<p class="price"><small>¥small>274.5p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/clothes_goods_5.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">拉夫劳伦t恤男正品 p>
<p class="flag">圆领短袖p>
<p class="price"><small>¥small>99p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/clothes_goods_6.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">李宁跑步鞋男鞋空气 弧2018春季款p>
<p class="flag">p>
<p class="price"><small>¥small>79p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/clothes_goods_7.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">Dickies男鞋2020春季 英伦休闲工装鞋低帮p>
<p class="flag">p>
<p class="price"><small>¥small>179p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/clothes_goods_8.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">北极绒春夏季纯棉背心 男士修身纯色打底p>
<p class="flag">p>
<p class="price"><small>¥small>69p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
ul>
div>
<div class="xtx_panel_header">
<h3>餐厨h3>
<a href="javascript:;" class="more">
查看全部<i class="sprites">i>
a>
<div class="tabs-bar">
<a href="javascript:;" class="active">水果a>
<a href="javascript:;">蔬菜a>
<a href="javascript:;">肉禽蛋a>
<a href="javascript:;">裤装a>
<a href="javascript:;">衬衫a>
<a href="javascript:;">内衣a>
div>
div>
<div class="xtx_panel_goods_2">
<ul class="clearfix">
<li>
<a href="javascript:;">
<img src="./uploads/kitchen_goods_cover.jpg" alt="">
a>
<div class="label">
<span>餐厨馆span>
<span>大额优惠<br>等你来拿span>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/kitchen_goods_1.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">创意可爱不锈钢便携餐具 套装筷子便携三件套p>
<p class="flag">p>
<p class="price"><small>¥small>5.9p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/kitchen_goods_2.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">三金西瓜霜竹炭牙刷软毛 成人家用家庭装p>
<p class="flag">p>
<p class="price"><small>¥small>20.9p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/kitchen_goods_3.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">朴(TOPOTO)大卫免手 洗平板拖把拓扑懒人木地 板刮刮乐桶拖布p>
<p class="flag">p>
<p class="price"><small>¥small>129p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/kitchen_goods_4.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">ONLY夏季新款高腰宽松 七分阔腿裙裤休闲裤p>
<p class="flag">p>
<p class="price"><small>¥small>274.5p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/kitchen_goods_5.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">金纺不伤手柔顺剂 妈妈的选择p>
<p class="flag">p>
<p class="price"><small>¥small>29p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/kitchen_goods_6.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">洁成绵柔抹布洗碗巾超 值5片装 洗锅刷碗p>
<p class="flag">p>
<p class="price"><small>¥small>10.9p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/kitchen_goods_7.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">大卫双驱动旋转拖把桶 免手洗拓扑拖布地拖墩布 p>
<p class="flag">p>
<p class="price"><small>¥small>159p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/kitchen_goods_8.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">斧头牌(AXE)去污地板 清洁剂2L 柠檬清香 p>
<p class="flag">海鲜年货p>
<p class="price"><small>¥small>22.9p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
ul>
div>
<div class="xtx_panel_header">
<h3>居家h3>
<a href="javascript:;" class="more">
查看全部<i class="sprites">i>
a>
<div class="tabs-bar">
<a href="javascript:;" class="active">咖啡具a>
<a href="javascript:;">水具酒具a>
<a href="javascript:;">锅具a>
<a href="javascript:;">餐具a>
<a href="javascript:;">功能厨具a>
<a href="javascript:;">茶具a>
<a href="javascript:;">清洁保鲜a>
div>
div>
<div class="xtx_panel_goods_2">
<ul class="clearfix">
<li>
<a href="javascript:;">
<img src="./uploads/home_goods_cover.jpg" alt="">
a>
<div class="label">
<span>居家馆span>
<span>全场满减span>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/home_goods_1.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">菜鸟异常专用链接 非请 勿拍p>
<p class="flag">海鲜年货p>
<p class="price"><small>¥small>8999p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/home_goods_2.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">【中盐软水盐】汉斯希 尔家用软水机适配p>
<p class="flag">p>
<p class="price"><small>¥small>65p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/home_goods_3.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">云米净水壶家用直饮台式 净水机渗透过滤自来水p>
<p class="flag">海鲜年货p>
<p class="price"><small>¥small>129p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/home_goods_4.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">ztk恒温调奶器配件玻璃壶 炖盅p>
<p class="flag">海鲜年货p>
<p class="price"><small>¥small>129p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/home_goods_5.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">荞麦枕头单人枕芯双人 护颈椎枕头芯p>
<p class="flag">p>
<p class="price"><small>¥small>29p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/home_goods_6.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">Bear/小熊 LLJ-B04G1 家用多功能切碎机 电动p>
<p class="flag">料理机p>
<p class="price"><small>¥small>10.9p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/home_goods_7.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">荣事达薄饼机春饼春卷皮 家用博饼机电饼铛 p>
<p class="flag">p>
<p class="price"><small>¥small>159p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/home_goods_8.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">美式双人实木床 红实木 显档次p>
<p class="flag">p>
<p class="price"><small>¥small>22.9p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
ul>
div>
div>
div>
<div class="xtx_goods_topic xtx_panel">
<div class="wrapper">
<div class="xtx_panel_header">
<h3>最新专题h3>
<a href="javascript:;" class="more">
查看全部<i class="sprites">i>
a>
div>
<div class="xtx_topic">
<ul class="clearfix">
<li>
<a href="javascript:;">
<img src="./uploads/topic_goods_1.jpg" alt="">
<div class="meta">
<p class="title">
吃这些美食才不算辜负自己
<small>餐厨起居洗护好物small>
p>
<span class="price"><small>¥small>29.9起span>
div>
a>
<div class="social">
<span class="like">
<i class="sprites">i>1220
span>
<span class="view">
<i class="sprites">i>1800
span>
<span class="reply">
<i class="sprites">i>1220
span>
div>
li>
<li>
<a href="javascript:;">
<img src="./uploads/topic_goods_2.jpg" alt="">
<div class="meta">
<p class="title">
吃这些美食才不算辜负自己
<small>餐厨起居洗护好物small>
p>
<span class="price"><small>¥small>29.9起span>
div>
a>
<div class="social">
<span class="liked">
<i class="sprites">i>1220
span>
<span class="view">
<i class="sprites">i>1800
span>
<span class="reply">
<i class="sprites">i>1220
span>
div>
li>
<li>
<a href="javascript:;">
<img src="./uploads/topic_goods_3.jpg" alt="">
<div class="meta">
<p class="title">
吃这些美食才不算辜负自己
<small>餐厨起居洗护好物small>
p>
<span class="price"><small>¥small>29.9起span>
div>
a>
<div class="social">
<span class="like">
<i class="sprites">i>1220
span>
<span class="view">
<i class="sprites">i>1800
span>
<span class="reply">
<i class="sprites">i>1220
span>
div>
li>
ul>
div>
div>
div>
<div class="xtx_footer clearfix">
<div class="wrapper">
<div class="contact clearfix">
<dl>
<dt>客户服务dt>
<dd class="chat">在线客服dd>
<dd class="feedback">问题反馈dd>
dl>
<dl>
<dt>关注我们dt>
<dd class="weixin">公众号dd>
<dd class="weibo">微博dd>
dl>
<dl>
<dt>下载APPdt>
<dd class="qrcode">
<img src="./uploads/qrcode.jpg">
dd>
<dd class="download">
<span>扫描二维码span>
<span>立马下载APPspan>
<a href="javascript:;">下载页面a>
dd>
dl>
<dl>
<dt>服务热线dt>
<dd class="hotline">
400-0000-000
<small>周一至周日 8:00-18:00small>
dd>
dl>
div>
div>
<div class="extra">
<div class="wrapper">
<div class="slogan">
<a href="javascript:;" class="price">价格亲民a>
<a href="javascript:;" class="express">物流快捷a>
<a href="javascript:;" class="quality">品质新鲜a>
div>
<div class="copyright">
<p>
<a href="javascript:;">关于我们a>
<a href="javascript:;">帮助中心a>
<a href="javascript:;">售后服务a>
<a href="javascript:;">配送与验收a>
<a href="javascript:;">商务合作a>
<a href="javascript:;">搜索推荐a>
<a href="javascript:;">友情链接a>
p>
<p>CopyRight © 小兔鲜儿p>
div>
div>
div>
div>
<div class="xtx-elevator">
<ul class="xtx-elevator-list">
<li><a href="javascript:;" data-name="new">新鲜好物a>li>
<li><a href="javascript:;" data-name="popular">人气推荐a>li>
<li><a href="javascript:;" data-name="brand">热门品牌a>li>
<li><a href="javascript:;" data-name="topic">最新专题a>li>
<li><a href="javascript:;" id="backTop"><i class="sprites">i>顶部a>li>
ul>
div>
<script>
// 获取元素
const elevator = document.querySelector('.xtx-elevator')
// 1.当页面滚动大于300像素,就显示 电梯导航
// 2. 给页面添加滚动事件
window.addEventListener('scroll', function () {
// 被卷去的头部大于300
const n = document.documentElement.scrollTop
/* if (n >= 300) {
// opacity里面肯定添加了transition,淡入淡出效果
elevator.style.opacity = 1
} else {
elevator.style.opacity = 0
} */
// 三元运算符
elevator.style.opacity = n >= 300 ? 1 : 0
})
// 点击返回页面顶部
// 和上面的滚动没有关系
const backTop = document.querySelector('#backTop')
backTop.addEventListener('click', function () {
// 可读写
// document.documentElement.scrollTop = 0
// 另外一种方法:window.scrollTo(x, y)
// 它们的区别是一个是属性赋值,一个是方法赋值的形式。scrollTo可以x轴滚动也可以y轴滚动
// window.scrollTo(200, 0)
// window.scrollTo(0, 200)
window.scrollTo(0, 0)
})
script>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面尺寸事件title>
<style>
div {
display: inline-block;
/* width: 200px; */
height: 200px;
background-color: pink;
/* 检测宽高的时候包括padding,不包括border */
padding: 10px;
border: 20px solid red;
}
style>
head>
<body>
<div>dsodhofhq'qp[qjfg[gjq[j[j[hj['h['div>
<script>
// 新属性:clientwidth,clientheight 获取元素可见部分的宽高
// 返回的数字型
const div = document.querySelector('div')
console.log(div.clientWidth)
// resize 浏览器窗口大小发生变化的时候触发的事件
window.addEventListener('resize', function () {
console.log(1)
})
script>
body>
html>
这样就能得到距离左侧,顶部的距离了。(靠自己算算不准,所以采用js更加靠谱)
学了offset之后,页面滚动大于300px再显示就不科学了,我们要让它在出现那个盒子顶部之后就开始显示导航栏 这样一来这个盒子上面的盒子再加或者再减都没有影响了
不用console.log直接在控制台检测效果也行
电梯导航改动的相关代码
因为-80~0有过渡效果,所以是滑下来的
知道需求之后,我们来写js,手动的把.header的top改成-80px,滚动到秒杀模块的时候就可以让它显示了
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>仿新浪固定头部title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.content {
overflow: hidden;
width: 1000px;
height: 3000px;
background-color: pink;
margin: 0 auto;
}
.backtop {
display: none;
width: 50px;
left: 50%;
margin: 0 0 0 505px;
position: fixed;
bottom: 60px;
z-index: 100;
}
.backtop a {
height: 50px;
width: 50px;
background: url(./images/bg2.png) 0 -600px no-repeat;
opacity: 0.35;
overflow: hidden;
display: block;
text-indent: -999em;
cursor: pointer;
}
.header {
position: fixed;
top: -80px;
left: 0;
width: 100%;
height: 80px;
background-color: purple;
text-align: center;
color: #fff;
line-height: 80px;
font-size: 30px;
transition: all .3s;
}
.sk {
width: 300px;
height: 300px;
background-color: skyblue;
margin-top: 500px;
}
style>
head>
<body>
<div class="header">我是顶部导航栏div>
<div class="content">
<div class="sk">秒杀模块div>
div>
<div class="backtop">
<img src="./images/close2.png" alt="">
<a href="javascript:;">a>
div>
<script>
const sk = document.querySelector('.sk')
const header = document.querySelector('.header')
// 1.页面滚动事件
window.addEventListener('scroll', function () {
// 当页面滚动到 秒杀模块 的时候, 就改变 头部的 top值
// 页面被卷去的头部 >= 秒杀模块的位置 offsetTop
const n = document.documentElement.scrollTop
/* if (n >= sk.offsetTop) {
header.style.top = 0
} else {
// css一定要带单位,样式这些,我们说过 acrollTop这些可以不用带单位
header.style.top = '-80px'
} */
// 三元表达式更加简洁 先算赋值符号右边的
header.style.top = n >= sk.offsetTop ? 0 : '-80px'
})
script>
body>
html>
blibli导航滑动案例
核心思想:对红色线盒子采用定位的方式定位到首页,动画盒子下面,他是一个单独的盒子,故它可以单独移动,通过给红色线盒子给个transform里面的translate来实现滑动。当点完之后,红色的盒子移动到链接的位置。接下来是移动多少距离的问题,我们可以通过offsetLeft获取盒子距离左侧的距离,我们把这个距离给盒子trasform里面的translate就可以在点击之后跟着过来了。同时我们给它添加一个过渡效果,就可以慢慢过来了,再给每一个小链接绑定一个点击事件。
要获得所有的a链接,所以要用到我们的事件委托,tabs-list是a的父级,把a的点击事件委托给它的父亲就行了。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bilibili-干杯~~~title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./fonts/iconfont.css">
head>
<body>
<header class="suspension">
<div class="m-navbar">
<a href="#" class="logo">
<i class="iconfont Navbar_logo">i>
a>
<div class="right">
<a href="#" class="search">
<i class="iconfont ic_search_tab">i>
a>
<a href="#" class="face">
<img src="./images/login.png" alt="">
a>
<div class="app-btn">
<img src="./images/download.png" alt="">
div>
div>
div>
<div class="channel-menu">
<div class="tabs">
<div class="tabs-list">
<a href="#">首页a>
<a href="#">动画a>
<a href="#">番剧a>
<a href="#">果蔬a>
<a href="#">音乐a>
<a href="#">舞蹈a>
<a href="#">鬼畜a>
<a href="#">吹鬼a>
<div class="line">div>
div>
div>
<div class="after">
<i class="iconfont general_pulldown_s">i>
div>
div>
header>
<div class="m-home">
<div class="video-list">
<a href="#" class="video-item">
<div class="card">
<img src="./images/dog.jpg@480w_270h_1c" alt="">
<div class="count">
<span>
<i class="iconfont icon_shipin_bofangshu">i>
播放量
span>
<span>
<i class="iconfont icon_shipin_danmushu">i>
评论数
span>
div>
div>
<p class="title ellipsis-2">
315晚会能不能曝光下智能电视?N重广告、套娃会员、操作反人类,当代年轻人是怎么被智能电视逼疯的?【商业B面&牛顿】
p>
a>
<a href="#" class="video-item">
<div class="card">
<img src="./images/dog.jpg@480w_270h_1c" alt="">
<div class="count">
<span>
<i class="iconfont icon_shipin_bofangshu">i>
播放量
span>
<span>
<i class="iconfont icon_shipin_danmushu">i>
评论数
span>
div>
div>
<p class="title ellipsis-2">
315晚会能不能曝光下智能电视?N重广告、套娃会员、操作反人类,当代年轻人是怎么被智能电视逼疯的?【商业B面&牛顿】
p>
a>
<a href="#" class="video-item">
<div class="card">
<img src="./images/dog.jpg@480w_270h_1c" alt="">
<div class="count">
<span>
<i class="iconfont icon_shipin_bofangshu">i>
播放量
span>
<span>
<i class="iconfont icon_shipin_danmushu">i>
评论数
span>
div>
div>
<p class="title ellipsis-2">
315晚会能不能曝光下智能电视?N重广告、套娃会员、操作反人类,当代年轻人是怎么被智能电视逼疯的?【商业B面&牛顿】
p>
a>
<a href="#" class="video-item">
<div class="card">
<img src="./images/dog.jpg@480w_270h_1c" alt="">
<div class="count">
<span>
<i class="iconfont icon_shipin_bofangshu">i>
播放量
span>
<span>
<i class="iconfont icon_shipin_danmushu">i>
评论数
span>
div>
div>
<p class="title ellipsis-2">
315晚会能不能曝光下电视?
p>
a>
<a href="#" class="video-item">
<div class="card">
<img src="./images/dog.jpg@480w_270h_1c" alt="">
<div class="count">
<span>
<i class="iconfont icon_shipin_bofangshu">i>
播放量
span>
<span>
<i class="iconfont icon_shipin_danmushu">i>
评论数
span>
div>
div>
<p class="title ellipsis-2">
315晚会能不能曝光下智能电视?N重广告、套娃会员、操作反人类,当代年轻人是怎么被智能电视逼疯的?【商业B面&牛顿】
p>
a>
<a href="#" class="video-item">
<div class="card">
<img src="./images/dog.jpg@480w_270h_1c" alt="">
<div class="count">
<span>
<i class="iconfont icon_shipin_bofangshu">i>
播放量
span>
<span>
<i class="iconfont icon_shipin_danmushu">i>
评论数
span>
div>
div>
<p class="title ellipsis-2">
315晚会能不能曝光下智能电视?N重广告、套娃会员、操作反人类,当代年轻人是怎么被智能电视逼疯的?【商业B面&牛顿】
p>
a>
<a href="#" class="video-item">
<div class="card">
<img src="./images/dog.jpg@480w_270h_1c" alt="">
<div class="count">
<span>
<i class="iconfont icon_shipin_bofangshu">i>
播放量
span>
<span>
<i class="iconfont icon_shipin_danmushu">i>
评论数
span>
div>
div>
<p class="title ellipsis-2">
315晚会能不能曝光下智能电视?N重广告、套娃会员、操作反人类,当代年轻人是怎么被智能电视逼疯的?【商业B面&牛顿】
p>
a>
<a href="#" class="video-item">
<div class="card">
<img src="./images/dog.jpg@480w_270h_1c" alt="">
<div class="count">
<span>
<i class="iconfont icon_shipin_bofangshu">i>
播放量
span>
<span>
<i class="iconfont icon_shipin_danmushu">i>
评论数
span>
div>
div>
<p class="title ellipsis-2">
315晚会能不能曝光下智能电视?N重广告、套娃会员、操作反人类,当代年轻人是怎么被智能电视逼疯的?【商业B面&牛顿】
p>
a>
<a href="#" class="video-item">
<div class="card">
<img src="./images/dog.jpg@480w_270h_1c" alt="">
<div class="count">
<span>
<i class="iconfont icon_shipin_bofangshu">i>
播放量
span>
<span>
<i class="iconfont icon_shipin_danmushu">i>
评论数
span>
div>
div>
<p class="title ellipsis-2">
315晚会能不能曝光下智能电视?N重广告、套娃会员、操作反人类,当代年轻人是怎么被智能电视逼疯的?【商业B面&牛顿】
p>
a>
<a href="#" class="video-item">
<div class="card">
<img src="./images/dog.jpg@480w_270h_1c" alt="">
<div class="count">
<span>
<i class="iconfont icon_shipin_bofangshu">i>
播放量
span>
<span>
<i class="iconfont icon_shipin_danmushu">i>
评论数
span>
div>
div>
<p class="title ellipsis-2">
315晚会能不能曝光下智能电视?N重广告、套娃会员、操作反人类,当代年轻人是怎么被智能电视逼疯的?【商业B面&牛顿】
p>
a>
<a href="#" class="video-item">
<div class="card">
<img src="./images/dog.jpg@480w_270h_1c" alt="">
<div class="count">
<span>
<i class="iconfont icon_shipin_bofangshu">i>
播放量
span>
<span>
<i class="iconfont icon_shipin_danmushu">i>
评论数
span>
div>
div>
<p class="title ellipsis-2">
315晚会能不能曝光下智能电视?N重广告、套娃会员、操作反人类,当代年轻人是怎么被智能电视逼疯的?【商业B面&牛顿】
p>
a>
div>
div>
<footer class="app">
<div class="btn-app">
<i class="iconfont Navbar_logo">i>
打开App,看你感兴趣的视频
div>
footer>
<script>
// 1. 事件委托的方法 获取父元素 tabs-list
const list = document.querySelector('.tabs-list')
const line = document.querySelector('.line')
// 2. 给a注册事件
list.addEventListener('click', function (e) {
// 判断点击的是a 只有点击了A 才有触发效果
if (e.target.tagName === 'A') {
// console.log(11)
// 当前元素是谁 ? e.target
// 得到当前点击元素的位置
// 得到当前的链接的 offsetLeft
// console.log(e.target.offsetLeft)
// 让line盒子来进行移动
// 只动X轴就行了,因为Y轴不需要动
line.style.transform = `translateX(100px)`
// 把我们点击的a链接盒子的位置 然后移动
line.style.transform = `translateX(${e.target.offsetLeft}px)`
// transform移动的时候可以添加过渡效果 谁做动画给谁加过渡 transition 当时是在index.less里面写的
}
})
script>
body>
html>
这个方法和offset的区别:offset是针对的整个页面,而getBoundingClientRect()是针对的视口,它会随着页面下拉而改变四个位置的坐标,但是offset针对的真个页面,它不会随着下拉而改变坐标。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获取元素大小和位置的另外一个方法title>
<style>
body {
height: 2000px;
}
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px;
}
style>
head>
<body>
<div>div>
<script>
const div = document.querySelector('div')
// 打开之后能得到一个对象,对象里面有宽高,还有上下左右四个位置
console.log(div.getBoundingClientRect())
script>
body>
html>
console.log(e.target.dataset)
console.log(e.target.dataset.name)
要想点击之后,页面是滑动过去的,而不是一下子跳过去的,只用在css上面添加一句话就行
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小兔鲜儿 - 新鲜 惠民 快捷!title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/index.css">
head>
<body>
<div class="xtx_topnav">
<div class="wrapper">
<ul class="xtx_navs">
<li>
<a href="javascript:;">请先登录a>
li>
<li>
<a href="javascript:;">免费注册a>
li>
<li>
<a href="javascript:;">我的订单a>
li>
<li>
<a href="javascript:;">会员中心a>
li>
<li>
<a href="javascript:;">帮助中心a>
li>
<li>
<a href="javascript:;">在线客服a>
li>
<li>
<a href="javascript:;">
<i class="mobile sprites">i>
手机版
a>
li>
ul>
div>
div>
<div class="xtx_header">
<div class="wrapper">
<h1 class="xtx_logo"><a href="/">小兔鲜儿a>h1>
<div class="xtx_navs">
<ul class="clearfix">
<li>
<a href="javascript:;">首页a>
li>
<li>
<a href="javascript:;">生鲜a>
li>
<li>
<a href="javascript:;">美食a>
li>
<li>
<a href="javascript:;">餐厨a>
li>
<li>
<a href="javascript:;">电器a>
li>
<li>
<a href="javascript:;">居家a>
li>
<li>
<a href="javascript:;">洗护a>
li>
<li>
<a href="javascript:;">孕婴a>
li>
<li>
<a href="javascript:;">服装a>
li>
ul>
div>
<div class="xtx_search clearfix">
<a href="javascript:;" class="xtx_search_cart sprites">
<i>2i>
a>
<div class="xtx_search_wrapper">
<input type="text" placeholder="搜一搜">
div>
div>
div>
div>
<div class="xtx_entry">
<div class="wrapper">
<div class="xtx_category">
<ul class="xtx_category_super">
<li>
<a href="javascript:;">
生鲜
<small>水果small>
<small>蔬菜small>
a>
<i class="sprites">i>
li>
<li class="active">
<a href="javascript:;">
美食
<small>面点small>
<small>干果small>
a>
<i class="sprites">i>
li>
<li>
<a href="javascript:;">
电器
<small>数码产品small>
a>
<i class="sprites">i>
li>
<li>
<a href="javascript:;">
居家
<small>床品small>
<small>四件套small>
<small>被枕small>
a>
<i class="sprites">i>
li>
<li>
<a href="javascript:;">
洗护
<small>洗发洗护small>
<small>美妆small>
a>
<i class="sprites">i>
li>
<li>
<a href="javascript:;">
孕婴
<small>奶粉small>
<small>玩具small>
<small>辅食small>
a>
<i class="sprites">i>
li>
<li>
<a href="javascript:;">
餐橱
<small>数码产品small>
a>
<i class="sprites">i>
li>
<li>
<a href="javascript:;">
服饰
<small>女装small>
<small>男装small>
a>
<i class="sprites">i>
li>
<li>
<a href="javascript:;">
杂货
<small>户外small>
<small>图书small>
a>
<i class="sprites">i>
li>
<li>
<a href="javascript:;">
品牌
<small>品牌制造small>
a>
<i class="sprites">i>
li>
ul>
<div class="xtx_category_subset">
div>
div>
<div class="xtx_banner">
<ul>
<li>
<a href="javascript:;">
<img src="./uploads/banner_1.png" alt="">
a>
li>
ul>
<a href="javascript:;" class="prev sprites">a>
<a href="javascript:;" class="next sprites">a>
<div class="indicator">
<span>span>
<span>span>
<span class="active">span>
<span>span>
<span>span>
div>
div>
div>
div>
<div class="xtx_goods_new xtx_panel">
<div class="wrapper">
<div class="xtx_panel_header">
<h3>新鲜好物<small>新鲜出炉 品质靠谱small>h3>
<a href="javascript:;" class="more">
查看全部<i class="sprites">i>
a>
div>
<div class="xtx_panel_goods_1">
<a href="javascript:;">
<img src="./uploads/new_goods_1.jpg" alt="">
<span class="name">睿米无线吸尘器F8span>
<span class="price"><small>¥small>899span>
a>
<a href="javascript:;">
<img src="./uploads/new_goods_2.jpg" alt="">
<span class="name">智能环绕3D空调span>
<span class="price"><small>¥small>1299span>
a>
<a href="javascript:;">
<img src="./uploads/new_goods_3.jpg" alt="">
<span class="name">广东软软糯米煲仔饭span>
<span class="price"><small>¥small>129span>
a>
<a href="javascript:;">
<img src="./uploads/new_goods_4.jpg" alt="">
<span class="name">罗西机械智能手表span>
<span class="price"><small>¥small>3399span>
a>
div>
div>
div>
<div class="xtx_goods_popular xtx_panel">
<div class="wrapper">
<div class="xtx_panel_header">
<h3>人气推荐<small>人气爆款 不容错过small>h3>
div>
<div class="xtx_panel_goods_1">
<a href="javascript:;">
<img src="./uploads/popular_1.jpg">
<span class="title">特惠推荐span>
<span class="alt">我猜得到 你的需要span>
a>
<a href="./index-hot.html">
<img src="./uploads/popular_2.jpg">
<span class="title">爆款推荐span>
<span class="alt">人气好物推荐span>
a>
<a href="./index-one.html">
<img src="./uploads/popular_3.jpg">
<span class="title">场景使用一站买全span>
<span class="alt">编辑精心整理推荐span>
a>
<a href="javascript:;">
<img src="./uploads/popular_4.jpg">
<span class="title">领券中心span>
<span class="alt">发现更多超值优惠券span>
a>
div>
div>
div>
<div class="xtx_goods_brand xtx_panel">
<div class="wrapper">
<div class="xtx_panel_header">
<h3>热门品牌<small>国际经典 品质保证small>h3>
<div class="page-bar">
<a href="javascript:;" class="prev sprites">a>
<a href="javascript:;" class="next sprites active">a>
div>
div>
<div class="xtx_goods">
<ul>
<li>
<a href="./index-brand.html">
<img src="./uploads/brand_goods_1.jpg" alt="">
a>
<a href="./brand-list.html">
<img src="./uploads/brand_goods_2.jpg" alt="">
a>
<a href="javascript:;">
<img src="./uploads/brand_goods_3.jpg" alt="">
a>
<a href="javascript:;">
<img src="./uploads/brand_goods_4.jpg" alt="">
a>
<a href="javascript:;">
<img src="./uploads/brand_goods_5.jpg" alt="">
a>
li>
ul>
div>
div>
div>
<div class="xtx_goods_category xtx_panel">
<div class="wrapper">
<div class="xtx_panel_header">
<h3>生鲜h3>
<a href="javascript:;" class="more">
查看全部<i class="sprites">i>
a>
<div class="tabs-bar">
<a href="javascript:;" class="active">水果a>
<a href="javascript:;">蔬菜a>
<a href="javascript:;">肉禽蛋a>
<a href="javascript:;">裤装a>
<a href="javascript:;">衬衫a>
<a href="javascript:;">内衣a>
div>
div>
<div class="xtx_panel_goods_2">
<ul class="clearfix">
<li>
<a href="javascript:;">
<img src="./uploads/fresh_goods_cover.jpg" alt="">
a>
<div class="label">
<span>生鲜馆span>
<span>全场3件8折span>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/fresh_goods_1.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">美威 智利原味三文鱼排 240g/袋 4片装p>
<p class="flag">海鲜年货p>
<p class="price"><small>¥small>59p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/fresh_goods_2.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">红功夫 麻辣小龙虾1.5kg 4-6钱/25-32只p>
<p class="flag">火锅食材p>
<p class="price"><small>¥small>71.9p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/fresh_goods_3.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">三都港 冷冻无公害黄花鱼 700g 2条 袋装p>
<p class="flag">海鲜水产p>
<p class="price"><small>¥small>49.9p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/fresh_goods_4.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">渔公码头 大连鲜食入味 即食海参 辽参刺参 调味海p>
<p class="flag">海鲜年货p>
<p class="price"><small>¥small>899p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/fresh_goods_5.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">越南进口白心火龙果4个 装 标准果 单果400-550g p>
<p class="flag">p>
<p class="price"><small>¥small>29p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/fresh_goods_6.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">广西沃柑 柑橘1.5kgp>
<p class="flag">新鲜水果p>
<p class="price"><small>¥small>59p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/fresh_goods_7.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">进口 牛油果 6个装 单果重约130-180gp>
<p class="flag">新鲜水果p>
<p class="price"><small>¥small>39.9p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/fresh_goods_8.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">泰国进口山竹5A级 500g p>
<p class="flag">新鲜水果p>
<p class="price"><small>¥small>29.9p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
ul>
div>
<div class="xtx_panel_header">
<h3>服饰h3>
<a href="javascript:;" class="more">
查看全部<i class="sprites">i>
a>
<div class="tabs-bar">
<a href="javascript:;" class="active">行李箱a>
<a href="javascript:;">男士包袋a>
<a href="javascript:;">女士包袋a>
<a href="javascript:;">钱包及小提袋a>
<a href="javascript:;">男鞋a>
<a href="javascript:;">女鞋a>
<a href="javascript:;">拖鞋a>
div>
div>
<div class="xtx_panel_goods_2">
<ul class="clearfix">
<li>
<a href="javascript:;">
<img src="./uploads/clothes_goods_cover.jpg" alt="">
a>
<div class="label">
<span>服饰馆span>
<span>3折狂欢span>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/clothes_goods_1.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">人本秋季厚底帆布鞋 韩版低帮增高学生p>
<p class="flag">p>
<p class="price"><small>¥small>55p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/clothes_goods_2.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">迪士尼真皮针扣表带宽度 14-16mm规格双色压纹 女表带p>
<p class="flag">海鲜年货p>
<p class="price"><small>¥small>20.9p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/clothes_goods_3.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">三都港 冷冻无公害黄花鱼 700g 2条 袋装p>
<p class="flag">海鲜水产p>
<p class="price"><small>¥small>209p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/clothes_goods_4.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">ONLY夏季新款高腰宽松 七分阔腿裙裤休闲裤p>
<p class="flag">p>
<p class="price"><small>¥small>274.5p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/clothes_goods_5.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">拉夫劳伦t恤男正品 p>
<p class="flag">圆领短袖p>
<p class="price"><small>¥small>99p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/clothes_goods_6.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">李宁跑步鞋男鞋空气 弧2018春季款p>
<p class="flag">p>
<p class="price"><small>¥small>79p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/clothes_goods_7.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">Dickies男鞋2020春季 英伦休闲工装鞋低帮p>
<p class="flag">p>
<p class="price"><small>¥small>179p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/clothes_goods_8.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">北极绒春夏季纯棉背心 男士修身纯色打底p>
<p class="flag">p>
<p class="price"><small>¥small>69p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
ul>
div>
<div class="xtx_panel_header">
<h3>餐厨h3>
<a href="javascript:;" class="more">
查看全部<i class="sprites">i>
a>
<div class="tabs-bar">
<a href="javascript:;" class="active">水果a>
<a href="javascript:;">蔬菜a>
<a href="javascript:;">肉禽蛋a>
<a href="javascript:;">裤装a>
<a href="javascript:;">衬衫a>
<a href="javascript:;">内衣a>
div>
div>
<div class="xtx_panel_goods_2">
<ul class="clearfix">
<li>
<a href="javascript:;">
<img src="./uploads/kitchen_goods_cover.jpg" alt="">
a>
<div class="label">
<span>餐厨馆span>
<span>大额优惠<br>等你来拿span>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/kitchen_goods_1.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">创意可爱不锈钢便携餐具 套装筷子便携三件套p>
<p class="flag">p>
<p class="price"><small>¥small>5.9p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/kitchen_goods_2.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">三金西瓜霜竹炭牙刷软毛 成人家用家庭装p>
<p class="flag">p>
<p class="price"><small>¥small>20.9p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/kitchen_goods_3.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">朴(TOPOTO)大卫免手 洗平板拖把拓扑懒人木地 板刮刮乐桶拖布p>
<p class="flag">p>
<p class="price"><small>¥small>129p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/kitchen_goods_4.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">ONLY夏季新款高腰宽松 七分阔腿裙裤休闲裤p>
<p class="flag">p>
<p class="price"><small>¥small>274.5p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/kitchen_goods_5.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">金纺不伤手柔顺剂 妈妈的选择p>
<p class="flag">p>
<p class="price"><small>¥small>29p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/kitchen_goods_6.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">洁成绵柔抹布洗碗巾超 值5片装 洗锅刷碗p>
<p class="flag">p>
<p class="price"><small>¥small>10.9p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/kitchen_goods_7.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">大卫双驱动旋转拖把桶 免手洗拓扑拖布地拖墩布 p>
<p class="flag">p>
<p class="price"><small>¥small>159p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/kitchen_goods_8.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">斧头牌(AXE)去污地板 清洁剂2L 柠檬清香 p>
<p class="flag">海鲜年货p>
<p class="price"><small>¥small>22.9p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
ul>
div>
<div class="xtx_panel_header">
<h3>居家h3>
<a href="javascript:;" class="more">
查看全部<i class="sprites">i>
a>
<div class="tabs-bar">
<a href="javascript:;" class="active">咖啡具a>
<a href="javascript:;">水具酒具a>
<a href="javascript:;">锅具a>
<a href="javascript:;">餐具a>
<a href="javascript:;">功能厨具a>
<a href="javascript:;">茶具a>
<a href="javascript:;">清洁保鲜a>
div>
div>
<div class="xtx_panel_goods_2">
<ul class="clearfix">
<li>
<a href="javascript:;">
<img src="./uploads/home_goods_cover.jpg" alt="">
a>
<div class="label">
<span>居家馆span>
<span>全场满减span>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/home_goods_1.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">菜鸟异常专用链接 非请 勿拍p>
<p class="flag">海鲜年货p>
<p class="price"><small>¥small>8999p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/home_goods_2.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">【中盐软水盐】汉斯希 尔家用软水机适配p>
<p class="flag">p>
<p class="price"><small>¥small>65p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/home_goods_3.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">云米净水壶家用直饮台式 净水机渗透过滤自来水p>
<p class="flag">海鲜年货p>
<p class="price"><small>¥small>129p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/home_goods_4.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">ztk恒温调奶器配件玻璃壶 炖盅p>
<p class="flag">海鲜年货p>
<p class="price"><small>¥small>129p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/home_goods_5.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">荞麦枕头单人枕芯双人 护颈椎枕头芯p>
<p class="flag">p>
<p class="price"><small>¥small>29p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/home_goods_6.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">Bear/小熊 LLJ-B04G1 家用多功能切碎机 电动p>
<p class="flag">料理机p>
<p class="price"><small>¥small>10.9p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/home_goods_7.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">荣事达薄饼机春饼春卷皮 家用博饼机电饼铛 p>
<p class="flag">p>
<p class="price"><small>¥small>159p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/home_goods_8.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">美式双人实木床 红实木 显档次p>
<p class="flag">p>
<p class="price"><small>¥small>22.9p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
ul>
div>
div>
div>
<div class="xtx_goods_topic xtx_panel">
<div class="wrapper">
<div class="xtx_panel_header">
<h3>最新专题h3>
<a href="javascript:;" class="more">
查看全部<i class="sprites">i>
a>
div>
<div class="xtx_topic">
<ul class="clearfix">
<li>
<a href="javascript:;">
<img src="./uploads/topic_goods_1.jpg" alt="">
<div class="meta">
<p class="title">
吃这些美食才不算辜负自己
<small>餐厨起居洗护好物small>
p>
<span class="price"><small>¥small>29.9起span>
div>
a>
<div class="social">
<span class="like">
<i class="sprites">i>1220
span>
<span class="view">
<i class="sprites">i>1800
span>
<span class="reply">
<i class="sprites">i>1220
span>
div>
li>
<li>
<a href="javascript:;">
<img src="./uploads/topic_goods_2.jpg" alt="">
<div class="meta">
<p class="title">
吃这些美食才不算辜负自己
<small>餐厨起居洗护好物small>
p>
<span class="price"><small>¥small>29.9起span>
div>
a>
<div class="social">
<span class="liked">
<i class="sprites">i>1220
span>
<span class="view">
<i class="sprites">i>1800
span>
<span class="reply">
<i class="sprites">i>1220
span>
div>
li>
<li>
<a href="javascript:;">
<img src="./uploads/topic_goods_3.jpg" alt="">
<div class="meta">
<p class="title">
吃这些美食才不算辜负自己
<small>餐厨起居洗护好物small>
p>
<span class="price"><small>¥small>29.9起span>
div>
a>
<div class="social">
<span class="like">
<i class="sprites">i>1220
span>
<span class="view">
<i class="sprites">i>1800
span>
<span class="reply">
<i class="sprites">i>1220
span>
div>
li>
ul>
div>
div>
div>
<div class="xtx_footer clearfix">
<div class="wrapper">
<div class="contact clearfix">
<dl>
<dt>客户服务dt>
<dd class="chat">在线客服dd>
<dd class="feedback">问题反馈dd>
dl>
<dl>
<dt>关注我们dt>
<dd class="weixin">公众号dd>
<dd class="weibo">微博dd>
dl>
<dl>
<dt>下载APPdt>
<dd class="qrcode">
<img src="./uploads/qrcode.jpg">
dd>
<dd class="download">
<span>扫描二维码span>
<span>立马下载APPspan>
<a href="javascript:;">下载页面a>
dd>
dl>
<dl>
<dt>服务热线dt>
<dd class="hotline">
400-0000-000
<small>周一至周日 8:00-18:00small>
dd>
dl>
div>
div>
<div class="extra">
<div class="wrapper">
<div class="slogan">
<a href="javascript:;" class="price">价格亲民a>
<a href="javascript:;" class="express">物流快捷a>
<a href="javascript:;" class="quality">品质新鲜a>
div>
<div class="copyright">
<p>
<a href="javascript:;">关于我们a>
<a href="javascript:;">帮助中心a>
<a href="javascript:;">售后服务a>
<a href="javascript:;">配送与验收a>
<a href="javascript:;">商务合作a>
<a href="javascript:;">搜索推荐a>
<a href="javascript:;">友情链接a>
p>
<p>CopyRight © 小兔鲜儿p>
div>
div>
div>
div>
<div class="xtx-elevator">
<ul class="xtx-elevator-list">
<li><a href="javascript:;" data-name="new">新鲜好物a>li>
<li><a href="javascript:;" data-name="popular">人气推荐a>li>
<li><a href="javascript:;" data-name="brand">热门品牌a>li>
<li><a href="javascript:;" data-name="topic">最新专题a>li>
<li><a href="javascript:;" id="backTop"><i class="sprites">i>顶部a>li>
ul>
div>
<script>
// 1. 第一大模块,页面滑动可以显示和隐藏
// 为了防止变量污染 自适应函数 (function(){剪切的内容})();
(function () {
// 获取元素
const elevator = document.querySelector('.xtx-elevator')
// 1.当页面滚动大于300像素,就显示 电梯导航
// -------- 学了offset之后,页面滚动大于300px再显示就不科学了,我们要让它在出现那个盒子顶部之后就开始显示导航栏 这样一来这个盒子上面的盒子再加或者再减都没有影响了
const xtx_entry = document.querySelector('.xtx_entry')
// 2. 给页面添加滚动事件
window.addEventListener('scroll', function () {
// 被卷去的头部大于300
const n = document.documentElement.scrollTop
/* if (n >= 300) {
// opacity里面肯定添加了transition,淡入淡出效果
elevator.style.opacity = 1
} else {
elevator.style.opacity = 0
} */
// 三元运算符
// elevator.style.opacity = n >= 300 ? 1 : 0
// 这里就不用300了,改为entry.offsetTop,程序就更加自由了,不用担心盒子的上移或者下移,是自动检测的
elevator.style.opacity = n >= xtx_entry.offsetTop ? 1 : 0
})
// 点击返回页面顶部
// 和上面的滚动没有关系
const backTop = document.querySelector('#backTop')
backTop.addEventListener('click', function () {
// 可读写
// document.documentElement.scrollTop = 0
// 另外一种方法:window.scrollTo(x, y)
// 它们的区别是一个是属性赋值,一个是方法赋值的形式。scrollTo可以x轴滚动也可以y轴滚动
// window.scrollTo(200, 0)
// window.scrollTo(0, 200)
window.scrollTo(0, 0)
})
})();
// 第二第三个模块一起都放到另外一个执行函数里面
// 因为点击和滚动都有一样的效果
(function () {
// 2.(第二个模块)点击页面可以滑动
// 有很多小li,循环绑定很麻烦,所以我们用事件委托,获取父元素,绑定事件
const list = document.querySelector('.xtx-elevator-list')
list.addEventListener('click', function (e) {
// console.log(11);
// 在 'A'后面添加 && e.target.dataset.name 是因为点击 顶部 后会报错,而且返回顶部之后向下滑动高亮没有消失 解决办法就是 发现顶部和另外4个小a的区别是 另外4个小a具有自定义属性而 顶部 没有 所以通过选出自定义属性名的方式将 顶部 排除在外 e.target.dataset.name能获取自定义属性名的时候就为真 获得自定义属性名为null的时候就为假 (字符串除了空其它的全为真)
if (e.target.tagName === 'A' && e.target.dataset.name) {
// 排他思想
/* // 按照以前的做法: 先移除原来的类active 再在点击的a上面添加active
// 这样的做法会报错,因为它跟之前的不一样,这个一开始没有固定选定一个a添加active,所以一开始获取active的时候会显示无法获取 active
// document.querySelector('.xtx-elevator-list .active').classList.remove('active') */
// 先移除原来的类active
// 先获取这个带有active的对象
const old = document.querySelector('.xtx-elevator-list .active')
// console.log(old)
// 判断
// 如果存在就返回这个类名然后移除,如果不存在则返回null,if (old)就为假,就不执行后面的,不会报错
// 一句话可以不用写大括号
if (old) old.classList.remove('active')
// 当前元素添加active
e.target.classList.add('active')
// 获得自定义属性 new topic
// console.log(e.target.dataset)
// console.log(e.target.dataset.name)
// 根据小盒子的自定义属性值 去选择 对应的大盒子
// console.log(document.querySelector(`.xtx_goods_new}`))
// console.log(document.querySelector(`.xtx_goods_${e.target.dataset.name}`).offsetTop)
// 获得对应大盒子的 offsetTop
const top = document.querySelector(`.xtx_goods_${e.target.dataset.name}`).offsetTop
// 让页面滚动到对应的位置
document.documentElement.scrollTop = top
}
})
// 3. 页面滚动, 可以根据大盒子选小盒子(new, popular等) 添加 active 类
window.addEventListener('scroll', function () {
// 3.1 先移除类 直接复制粘贴
// 先获取这个带有active的对象
const old = document.querySelector('.xtx-elevator-list .active'