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+css 网页每次加载不同样式的实现方法
Dec 27 Javascript
Javascript面向对象编程(二) 构造函数的继承
Aug 28 Javascript
快速解决FusionCharts联动的中文乱码问题
Dec 04 Javascript
js弹出对话框方式小结
Nov 17 Javascript
理解JavaScript表单的基础知识
Jan 25 Javascript
浅谈javascript基础之客户端事件驱动
Jun 10 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
Apr 28 Javascript
JavaScript for循环 if判断语句(学习笔记)
Oct 11 Javascript
vue中echarts3.0自适应的方法
Feb 26 Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
Sep 27 Javascript
JS基础之逻辑结构与循环操作示例
Jan 19 Javascript
Vue仿百度搜索功能
Dec 28 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 引用(&amp;)详解
2009/11/20 PHP
PHP中基本符号及使用方法
2010/03/23 PHP
thinkPHP中分页用法实例分析
2015/12/26 PHP
Docker 如何布置PHP开发环境
2016/06/21 PHP
laravel框架使用极光推送消息操作示例
2020/02/15 PHP
农历与西历对照
2006/09/06 Javascript
解决jquery .ajax 在IE下卡死问题的解决方法
2009/10/26 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
2014/05/03 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
2015/02/23 Javascript
SWFObject基本用法实例分析
2015/07/20 Javascript
javascript匀速运动实现方法分析
2016/01/08 Javascript
Google 地图控件集详解及实例代码
2016/08/06 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
2016/09/20 Javascript
jQuery-mobile事件监听与用法详解
2016/11/23 Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
2017/08/16 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
2017/08/18 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
2017/12/22 Javascript
php 解压zip压缩包内容到指定目录的实例
2018/01/23 Javascript
webpack中使用iconfont字体图标的方法
2018/02/22 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
2018/04/17 Javascript
Angular resolve基础用法详解
2018/10/03 Javascript
jQuery分组选择器简单用法示例
2019/04/04 jQuery
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
2019/12/16 Javascript
javascript实现京东快递单号的查询效果
2020/11/30 Javascript
Python中的super()方法使用简介
2015/08/14 Python
利用Python开发实现简单的记事本
2016/11/15 Python
Flask数据库迁移简单介绍
2017/10/24 Python
详解用Python爬虫获取百度企业信用中企业基本信息
2020/07/02 Python
C++是不是类型安全的
2014/02/18 面试题
介绍一下OSI七层模型
2012/07/03 面试题
关于幼儿的自我评价
2013/12/18 职场文书
应届本科生推荐信范文
2013/12/25 职场文书
2014年英语教师工作总结
2014/12/03 职场文书
2014年行政人事工作总结
2014/12/09 职场文书
会议主持词开场白
2015/05/28 职场文书
SpringBoot集成Druid连接池连接MySQL8.0.11
2021/07/02 Java/Android