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 相关文章推荐
JavaScript Archive Network 集合
May 12 Javascript
一款Jquery 分页插件的改造方法(服务器端分页)
Jul 11 Javascript
input输入框的自动匹配(原生代码)
Mar 19 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
Jul 01 Javascript
高性能JavaScript循环语句和条件语句
Jan 20 Javascript
纯js实现手风琴效果
Apr 17 Javascript
Bootstrap三种表单布局的使用方法
Jun 21 Javascript
bootstrap模态框实现拖拽效果
Dec 14 Javascript
微信小程序 自己制作小组件实例详解
Dec 22 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
Aug 06 Javascript
QML实现圆环颜色选择器
Sep 25 Javascript
javascript实现贪吃蛇游戏(娱乐版)
Aug 17 Javascript
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
百事可乐也出咖啡了 双倍咖啡因双倍快乐
2021/03/03 咖啡文化
PHP中array_keys和array_unique函数源码的分析
2016/02/26 PHP
php发送http请求的常用方法分析
2016/11/08 PHP
PHP使用PDO抽象层获取查询结果的方法示例
2018/05/10 PHP
ThinkPHP5.0框架验证码功能实现方法【基于第三方扩展包】
2019/03/11 PHP
php swoole多进程/多线程用法示例【基于php7nts版】
2019/08/12 PHP
JQuery 学习笔记 选择器之五
2009/07/23 Javascript
stream.js 一个很小、完全独立的Javascript类库
2011/10/28 Javascript
js实现倒计时(距离结束还有)示例代码
2013/07/24 Javascript
ie中js创建checkbox默认选中问题探讨
2013/10/21 Javascript
js 实现菜单上下显示附效果图
2013/11/21 Javascript
Jquery 在页面加载后执行的几种方式
2014/03/14 Javascript
使用jquery写个更改表格行顺序的小功能
2014/04/29 Javascript
JavaScript入门基础
2015/08/12 Javascript
关于axios返回空对象的问题解决
2017/04/04 Javascript
javascript数据结构中栈的应用之符号平衡问题
2017/04/11 Javascript
node中modules.exports与exports导出的区别
2018/06/08 Javascript
jQuery 实现倒计时天,时,分,秒功能
2018/07/31 jQuery
JS实现移动端点击按钮复制文本内容
2019/07/28 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
2019/08/08 Javascript
layui 对弹窗 form表单赋值的实现方法
2019/09/04 Javascript
laydate只显示时分 不显示秒的功能实现方法
2019/09/28 Javascript
javascript自定义右键菜单插件
2019/12/16 Javascript
vue项目实现多语言切换的思路
2020/09/17 Javascript
[52:09]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第二场
2014/05/26 DOTA
Python map和reduce函数用法示例
2015/02/26 Python
Python内置函数 next的具体使用方法
2017/11/24 Python
Python实现的根据IP地址计算子网掩码位数功能示例
2018/05/23 Python
在pytorch中对非叶节点的变量计算梯度实例
2020/01/10 Python
中国最大的团购网站:聚划算
2016/09/21 全球购物
世界上最大的在线学习和教学市场:Udemy
2017/11/08 全球购物
用Java语言将一个键盘输入的数字转化成中文输出
2013/01/25 面试题
组工干部演讲稿
2014/09/02 职场文书
python3+PyQt5+Qt Designer实现界面可视化
2021/06/10 Python
JPA 通过Specification如何实现复杂查询
2021/11/23 Java/Android
【海涛dota解说】一房久违的影魔魂守二连发
2022/04/01 DOTA