JS实现京东商品分类侧边栏


Posted in Javascript onDecember 11, 2020

本文实例为大家分享了JS实现京东商品分类侧边栏的具体代码,供大家参考,具体内容如下

JS实现京东商品分类侧边栏

HTML代码部分

<div>
  <img src="/1.png" alt="">
 </div>
 <ul>
  <li><a href="">京东秒杀</a></li>
  <li class="two"><a href="">欢迎</a></li>
  <li><a href="">特色优选</a></li>
  <li><a href="">频道广场</a></li>
  <li><a href="">为你推荐</a></li>
  <li class="two"><a href="">客服</a></li>
  <li style="border-bottom: none;" class="two"><a href="">反馈</a></li>
</ul>

CSS部分

<style>
  * {
   margin: 0;
   padding: 0;
  }

  a {
   text-decoration: none;
   color: #000;
  }

  div {
   width: 100%;

  }

  img {
   margin-left: 300px;
   display: block;
   margin: 0 auto;
  }

  ul {
   position: absolute;
   display: none;
   top: 350px;
   left: 1700px;
   width: 60px;
   height: 400px;
   border: 1px solid red;
   box-sizing: border-box;

  }

  ul li {
   width: 100%;
   height: 57px;
   list-style: none;
   text-align: center;
   float: right;
   padding: 5px 10px;
   line-height: 26px;
   text-align: center;
   float: left;
   box-sizing: border-box;
   border-bottom: 1px solid #eee;
  }

  li:hover {
   background-color: red;
  }

  li:hover a {
   color: white;
  }

  .two {
   line-height: 52px;
  }

JS部分

<script>
  document.addEventListener('scroll', function () {
   var ul = document.querySelector('ul')
   console.log(window.pageYOffset)
   if (window.pageYOffset > 700) {
    ul.style.display = 'block'
    ul.style.position = 'fixed';
   } else {
    ul.style.display = 'none'
   }
  })
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
Nov 30 Javascript
JQuery控制radio选中和不选中方法总结
Apr 15 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
Jun 08 Javascript
JS实现数字格式千分位相互转换方法
Aug 01 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
Sep 04 Javascript
react.js 翻页插件实例代码
Jan 19 Javascript
angular+ionic返回上一页并刷新页面
Aug 08 Javascript
angularjs 的数据绑定实现原理
Jul 02 Javascript
JQuery的加载和选择器用法简单示例
May 13 jQuery
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
Nov 13 Javascript
node.JS事件机制与events事件模块的使用方法详解
Feb 06 Javascript
vue/cli 配置动态代理无需重启服务的方法
May 20 Vue.js
vue使用exif获取图片经纬度的示例代码
Dec 11 #Vue.js
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 #Vue.js
一行JavaScript代码如何实现瀑布流布局
Dec 11 #Javascript
react中hook介绍以及使用教程
Dec 11 #Javascript
js实现菜单跳转效果
Dec 11 #Javascript
jquery实现拖拽小方块效果
Dec 10 #jQuery
js实现弹幕墙效果
Dec 10 #Javascript
You might like
php 日期时间处理函数小结
2009/12/18 PHP
浅谈PHP面向对象之访问者模式+组合模式
2017/05/22 PHP
购物车实现的几种方式优缺点对比
2018/05/02 PHP
JavaScript 验证浏览器是否支持javascript的方法小结
2009/05/17 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
2012/03/01 Javascript
jquery移除button的inline onclick事件(已测试及兼容浏览器)
2013/01/25 Javascript
JS 仿腾讯发表微博的效果代码
2013/12/25 Javascript
Seajs的学习笔记
2014/03/04 Javascript
浅析javascript 定时器
2014/12/23 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
2015/03/14 Javascript
JavaScript实现的类字典插入或更新方法实例
2015/07/10 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
2020/09/13 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
2016/04/06 Javascript
微信小程序 传值取值的几种方法总结
2017/01/16 Javascript
bootstrap switch开关组件使用方法详解
2017/08/22 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
2017/09/13 Javascript
微信小程序报错:this.setData is not a function的解决办法
2017/09/27 Javascript
详解angular2如何手动点击特定元素上的点击事件
2018/10/16 Javascript
js getBoundingClientRect使用方法详解
2019/07/17 Javascript
Vue代码整洁之去重方法整理
2019/08/06 Javascript
解决$store.getters调用不执行的问题
2019/11/08 Javascript
微信小程序实现一个简单swiper代码实例
2019/12/30 Javascript
Python交换变量
2008/09/06 Python
Django中如何防范CSRF跨站点请求伪造攻击的实现
2019/04/28 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
在Pytorch中计算自己模型的FLOPs方式
2019/12/30 Python
Python+OpenCV图像处理——图像二值化的实现
2020/10/24 Python
css3 响应式媒体查询的示例代码
2019/09/25 HTML / CSS
英国花园家具中心:Garden Furniture Centre
2017/08/24 全球购物
电气工程和自动化自荐信范文
2013/12/25 职场文书
求职信怎么写
2014/05/23 职场文书
企业标语口号
2014/06/10 职场文书
起诉书范文
2015/05/20 职场文书
MySQL实例精讲单行函数以及字符数学日期流程控制
2021/10/15 MySQL
2022新作动画《福星小子》释出宣传影片 加入内田真礼&宫野真守配音演出
2022/04/08 日漫
使用MybatisPlus打印sql语句
2022/04/22 SQL Server