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 相关文章推荐
html中的input标签的checked属性jquery判断代码
Sep 19 Javascript
C++中的string类的用法小结
Aug 07 Javascript
ionic2打包android时gradle无法下载的解决方法
Apr 05 Javascript
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
AngularJS中scope的绑定策略实例分析
Oct 30 Javascript
通过webpack引入第三方库的方法
Jul 20 Javascript
React 组件渲染和更新的实现代码示例
Feb 21 Javascript
vue使用原生swiper代码实例
Feb 05 Javascript
解决vue自定义指令导致的内存泄漏问题
Aug 04 Javascript
js面试题之异步问题的深入理解
Sep 20 Javascript
vue中可编辑树状表格的实现代码
Oct 31 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 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判断字符串在另一个字符串位置的方法
2014/02/27 PHP
php switch语句多个值匹配同一代码块的实现
2014/03/03 PHP
checkbox 多选框 联动实现代码
2008/10/22 Javascript
js给onclick赋值传参数的两种方法
2013/11/25 Javascript
js动态创建标签示例代码
2014/06/09 Javascript
jQuery层动画定位滑动效果的方法
2015/04/30 Javascript
JavaScript实现节点的删除与序号重建实例
2015/08/05 Javascript
每天一篇javascript学习小结(Date对象)
2015/11/13 Javascript
有关jquery与DOM节点操作方法和属性记录
2016/04/15 Javascript
原生js代码实现图片放大境效果
2016/10/30 Javascript
JS实现HTML标签转义及反转义
2020/04/14 Javascript
JavaScript严格模式详解
2017/01/16 Javascript
原生JS实现圆环拖拽效果
2017/04/07 Javascript
vue一步步实现alert功能
2017/07/05 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
2017/07/10 Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
2019/04/09 Javascript
jsonp跨域获取百度联想词的方法分析
2019/05/13 Javascript
Python在Console下显示文本进度条的方法
2016/02/14 Python
判断网页编码的方法python版
2016/08/12 Python
python 字符串转列表 list 出现\ufeff的解决方法
2017/06/22 Python
Mac中Python 3环境下安装scrapy的方法教程
2017/10/26 Python
使用实现XlsxWriter创建Excel文件并编辑
2018/05/04 Python
Linux下安装python3.6和第三方库的教程详解
2018/11/09 Python
python通过tcp发送xml报文的方法
2018/12/28 Python
Python----数据预处理代码实例
2019/03/20 Python
Python urllib2运行过程原理解析
2020/06/04 Python
python中time tzset()函数实例用法
2021/02/18 Python
HTML5实现无刷新修改URL的方法
2019/11/14 HTML / CSS
韩国流行时尚女装网站:Dintchina(中文)
2018/07/19 全球购物
Under Armour安德玛德国官网:美国高端运动科技品牌
2019/03/09 全球购物
巴基斯坦购物网站:Goto
2019/03/11 全球购物
幼儿园教师辞职信
2014/01/18 职场文书
成绩单公证书
2014/04/10 职场文书
水利局群众路线专题民主生活会发言材料
2014/09/21 职场文书
大学毕业晚会开场白
2015/05/29 职场文书
总结几个非常实用的Python库
2021/06/26 Python