Javascript元素滚动scoll系列 （仿淘宝固定右侧侧边栏）和移动端区别

最新推荐文章于 2020-12-15 18:10:33 发布
最新推荐文章于 2020-12-15 18:10:33 发布
阅读量707 收藏 1
点赞数
分类专栏： Javascript 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46513544/article/details/105426001
版权

效果：
1、原先侧边栏是绝对定位
2、当页面移动到一定位置，侧边栏改为固定定位
3、页面继续滚动，会让返回顶部显示出来

案例分析：1、需要用页面滚动事件scoll 因为页面滚动，所以事件源是document
2、滚动到某个位置，就是判断页面被卷上去的上部值
3、页面被卷上去的头部：可以通过window.pageYOffset 获得 如果被卷去的是左侧 window.pageXOffset
4、注意，元素被卷去的头部是element.scrollTop 如果是页面被卷去是window.pageYOffset

HTML部分
在这里插入图片描述
CSS部分
在这里插入图片描述
JS部分在这里插入图片描述1、获取元素 得到ducument然后用window.pageYOffset 如果大于banner卷去的头部就是固定定位
2、获取banner以及定义bannerTop 在利用页面卷进去的头部减去banner元素卷进去的头部（sliderbar.pageYOffset-bannerTop）
3、得到的效果图有300px 的像素差跳转 因为定位CSS时top为300px 所以 应该获得sliderbar.offset-banner.offset 为滚动完之后的距离 （消除了跳转&#

最低0.47元/天 解锁文章
jasmine s
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS案例-仿淘宝固定右侧侧边栏
qq_43781887的博客
05-15 359
需要实现的功能如下： 然后这个案例用到的关键变量大家可以看下面这个图，会很好理解： 完整代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d.
isolated-scroll:防止scoll事件冒泡到父元素
05-17
防止滚动事件冒泡到父元素— 。 $ npm install --save isolated-scroll 用法 const isolatedScroll = require ( 'isolated-scroll' ) ; // Isolate scrolling of selected element: const unbindHandlers = ...
仿淘宝侧边栏
xiaoqingwa156的博客
12-15 127
仿淘宝侧边栏 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .slider-ba
元素滚动 scroll —— 仿淘宝固定右侧侧边栏
赚钱养自个儿的博客
05-03 311
  学习来源：https://www.bilibili.com/video/BV1HJ41147DG   要求 原先侧边栏是绝对定位 当页面滚动到一定位置，侧边栏改为固定定位 页面继续滚动，会让返回顶部显示出来 思路 4. 需要用到页面滚动事件 scroll 因为是页面滚动，所以事件源是 document 5. 滚动到某个位置，就是判断页面被卷去的上部值。 6. 页面被卷去的头部：可以通过...
仿淘宝固定侧边栏
a63438840的博客
09-11 876
案例分析： 1，原先侧边栏是绝对定位 2，当页面滚动到一定位置（这里是滚动到 banner 到达页面顶部的时候），侧边栏改为固定定位 3，页面继续滚动，会让 “ 返回顶部 ” 显示出来 （滚动到 main 到达页面顶部的时候） 4，需要用到页面滚动事件 scroll 因为是页面滚动，所以事件源是document 5，滚动到某个位置，就是判断页面被卷去的上部值 6，页面被...
JavaScript学习笔记—仿淘宝固定侧边栏
weixin_45655555的博客
02-19 300
JavaScript学习—仿淘宝固定侧边栏 分析： 1.原先侧边栏是绝对定位 2.当页面滚动到一定位置，侧边栏改为固定定位 3.页面继续滚动，会让返回顶部显示出来 >>>>> 1.需要用到页面滚动事件scroll，因为是页面滚动，所以事件源是document 2.滚动到某个位置，就是判断页面被卷上去的值 3.页面被卷去的头部：可通过window.pageYOffset...
vue-scoll-hide-header:这是一个小的vue组件，您可以将其固定在固定的标头上，然后在scoll上标头会隐藏
05-18
Vue（滚动隐藏）页眉这是一个小的“无渲染” Vue组件，可在滚动条上隐藏标题。如何原始脚本 < body >< scroll> < header> < nav> ... </ nav> </ header> </ scroll>< main> ...</ main></ body >
infinite-scoll.js
10-17
用javascript实现无限滚动技术需要的js文件
ncutlh#gitbook-elasticsearch#8.28_上机动手实战基于scoll技术滚动搜索大量数据1
07-25
8.28_上机动手实战基于scoll技术滚动搜索大量数据如果一次性要查出来比如10万条数据，那么性能会很差，此时一般会采取用scoll滚动查询，一批一批的查，直
jQuery实现锚点scoll效果实例分析
10-24
主要介绍了jQuery实现锚点scoll效果,实例分析了锚点scoll效果的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
淘宝右侧固定导航定位.zip
07-24
模仿淘宝首屏页面的右侧固定定位导航栏写的，功能到不难写，但是有个问题花了我一上午的时间，每次点击的时候总是跳到页面顶部（后来发现是刷新），找了半天办法，最后总算解决了，如果你遇到同样的问题，可以看下我的代码
仿淘宝产品展示左右滚动图片
07-04
找了很久，终于整理出来了，很实用的，希望大家有用，欢迎评价
淘宝固定侧边栏(js小案例)
weixin_45773503的博客
06-05 749
1. 须知 需要用到页面滚动事件 scroll 因为是页面滚动，所以事件源是 document 滚动到某个位置，就是判断页面被卷去的上部值 页面被卷去的头部：可以通过window.pageYOffset 获得 如果是被卷去的左侧 window.pageXOffset 注意：元素被卷去的头部是element.scrollTop,如果被卷去的是页面则是window.pageYOffset 2. 代码 <!DOCTYPE html> <html lang="en"> <head
使用JavaScript滚动滚动元素
cungui5726的博客
08-23 1353
When I recoded and rebranded this site four months ago, I decided to make it completely free of frameworks: while the text and visible code samples for JQuery articles often remained unchanged, under ...
scroll案例：仿淘宝右侧固定侧边栏
小陈爱写代码
06-24 758
案例分析 原先侧边栏是绝对定位 当页面滚动到一定位置，侧边栏改为固定定位 页面继续滚动，会让返回顶部显示出来 重点 需要用到页面滚动事件 scroll ，因为页面是滚动的，所以事件源是document 滚动到某个位置，就是判断页面被卷上去的上部值 页面被卷去的头部：可以通过 window.pageYoffset 获得，如果被卷去的左侧 window.pageXoffset 注意，元素被卷去的头部是 element.scrollTop ,如果是页面被卷去的头部，则是 window.pageYoffs
api小案例五：仿淘宝 侧边栏固定
qq_45052409的博客
07-28 257
页面效果： 小伙伴们可自行补全css样式 <div class="slider-bar"> <span class="goBack">返回顶部</span> </div> <div class="top w">头部区域</div> <div class="cont w">中间区域</div> <div class="main w">主体部分</
js向右无缝滚动
yztezhl的专栏
07-31 1841
向右无缝滚动javascript demo 向右的：           http://www.baidu.com/img/logo.gif" >  http://www.baidu.com/img/logo.gif" >  http://www.baidu.com/img/logo.gif" >  http://www.baidu.com/img/logo.gi
移动端：左侧固定，右侧自适应
sunny_Destiny的博客
07-20 449
今天我们来总结一下移动端：左侧固定，右侧自适应布局的方法。 我们首先来看一下效果图。 移动端 接下来我们来分析实现移动端的四种方法。 方法一：浮动布局 #aside{ float:left; width:200px; background-color: #f30; } #content{ m...
向上，向下，向左，向右滚动等js实现
cxy_12345的博客
03-21 1559
http://www.dowebok.com/demo/188/index12.html想要清楚各个配置属性可以查看http://www.dowebok.com/188.html因为直接看js,注释竟然是俄语的
html里的什么标签可以代替uniapp里的scoll-view
最新发布
05-24
可以通过设置该 `<div>` 元素的 `overflow` 属性为 `scroll` 或 `auto` 来实现滚动效果。例如： ```html ; overflow: scroll;"> <!-- 这里是滚动内容 --> ``` 需要注意的是，uni-app 中的 `<scroll-view>` 组件...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值