固定边栏滚动特效

最新推荐文章于 2021-06-03 16:19:41 发布
原创 最新推荐文章于 2021-06-03 16:19:41 发布 · 292 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#固定边栏滚动特效

本文介绍了一种在网页设计中实现两栏布局时，右侧栏在达到底部后固定位置的技术方案。通过使用 CSS 的 position fixed 属性和 JavaScript 的滚动事件监听来实现这一效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

应用场景：假如有两栏布局，总高度都高于浏览器高度，然后左侧更高，这时滚动浏览器窗口的滚动条，当右边栏显示完全时，右边栏开始固定，左边栏可以继续滚动。

技术实现关键点：

  • css position fixed（脱离滚动流）
  • 监听window上的滚动事件
  • 设置fixed的条件判断：滚动高度+屏幕高度>右边栏高度；top设置成-(右边栏高度-窗口高度)。

js实现：

 

jq实现：

 

H5实战(六)：固定边栏滚动特效
weiweitb8的博客
09-21 875
1.目标效果 现在各大网站常常使用固定边栏滚动特效，即页面内容较长时，边栏先随着页面向下滚动，当边栏滚动到底时，则不会随着页面的滚动而滚动，而是固定在页面上保持不动。 2.实现思路 1）设计好页面布局，页面向左浮动，边栏向右浮动。 2）当滚动高度加上页面高度大于侧边栏的高度时，应设置侧边栏的position为fixed，否则就将position变回static。 3.代码实现 1）jq
html如何设置滚动动画,JavaScript 实现页面滚动动画
weixin_39964899的博客
06-20 3071
在做前端 UI 效果时，让元素根据滚动位置实现动画效果是一个非常流行的设计，通常我们会使用第三方插件或库来实现。在本教程中，我将教大家使用纯 JavaScript 和 CSS 来实现。先预览一下实现的效果：我们使用 CSS 来实现动画，用 JavaScript 来处理触发所需的样式。我们先来创建布局。创建布局我们先使用 HTML 创建页面布局，然后为需要实现动画的元素分配一个通用类名，后面的 Ja...
html5 固定边栏滚动特效
weixin_30263073的博客
09-14 160
<script src="https://code.jquery.com/jquery.js"></script> //引入jquery <script> //滚动事件绑定 $(window).scroll(function() { ...
边栏滚动固定
lidog的博客
05-21 457
这个函数要配合 css 使用；先在div 中设置好top 和bottom 的值； scroll_on:function(div){             var top = $(div).offset().top;             $(window).scroll(function(){                 var scrolltop = $(window).
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
12-10
当一个页面内容很长的时候，侧边栏栏目可能显得太短，当窗口滑动到靠下的位置，则侧边即失去了展示内容的机会。很多新闻资讯类网站如新浪、网易、优快云等，会在边栏的右下角以固定的小弹窗形式，以提供更多的内容展示方式，但这并不适合博客和web2.0风格的网站。 现在很多的独立博客和网站如人人网等，都使用了让侧边栏模块随滚动条滑动而位置固定的效果。就是当一个页面很长的时候，设定侧栏内容会跟随滚动条，这种效果适用于评论较多、内容较长的网站。志文工作室调研了几种类似功能的实现方法，摘录之以供参考。 参考一、提高浏览量的特效：侧栏跟随滚动条 来源：卢松松博客http://lusongsong.com/reed
jQuery的左右侧边栏固定中间滚动代码.zip
07-11
一款在页面向下滚动时，可以将左侧或右侧侧边栏固定在页面中的jQuery网页左右侧边栏固定中间滚动代码。 js代码 [removed][removed] [removed][removed] [removed][removed] [removed] $(document).ready...
js+css3侧边栏滚动显示首字母索引特效
06-11
【js+css3侧边栏滚动显示首字母索引特效】是一种常见的网页交互设计，它在长篇内容的侧边栏提供一个可滚动的字母列表，用户可以通过点击对应的首字母快速定位到相应内容。这种效果提高了用户体验，尤其适用于文章...
jQuery左右侧边栏固定中间滚动代码.zip
最新发布
09-21
《jQuery实现左右侧边栏固定中间滚动效果详解》 在网页设计中，为了提供良好的用户体验，经常需要实现一些动态效果，比如左右侧边栏在页面滚动时保持固定位置，而主要内容区域滚动。jQuery库因其易用性和强大的功能...
顶部固定不动 下部分滚动_彻底解决背景跟随弹窗滚动问题
weixin_39789101的博客
12-10 766
背景 在移动端使用弹窗时，我们会经常遇到这种现象：滑动弹窗时，遮罩层下面的背景(body)也会跟随滑动，带来的用户观感体验很差。市面上的解决方案大部分通过阻止touchmove默认事件执行event.preventDefault()解决，但是这种方案存在兼容性，不能对所有浏览器都有效，而且如果弹窗本身存在滚动(如活动规则弹窗)，这种解决方案并不能阻止背景滑动，如下图活动规则弹窗所示：终极...
js,jq获取屏幕的各种高度
u012999318的专栏
10-19 2429
Javascript: 网页可见区域宽： document.body.clientWidth 网页可见区域高： document.body.clientHeight 网页可见区域宽： document.body.offsetWidth (包括边线的宽) 网页可见区域高： document.body.offsetHeight (包括边线的高) 网页正文全文宽： document.bod
ocx控件自适应网页所给区域大小_新手必看 | 一学就会！原来web网页布局是这样的……...
weixin_39917090的博客
12-04 272
网页设计中的布局一般分为前端视角和设计视角。其中，前端视角主要是指实现页面的各种CSS布局方式，分别为：静态布局、流式布局、响应式布局、弹性布局和Flex布局。除了静态布局，其他都能实现在不同分辨率下页面的自适应，来给用户最佳的视觉呈现。今天，就给大家讲讲前端网页设计中的静态布局和流式布局。静态布局概念静态布局是最简单的一种布局方式，网页上的所有元素的尺寸一律使用px作为单位,在正常文档流中该是什...
web简单页面布局fixed 头部固定 内容滚动
weixin_34087307的博客
03-05 1362
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0,...
html纵向滚动特效,JavaScript 滚动类特效常用属性 - scrollLeft等
weixin_30045597的博客
06-02 257
scrollLeft等属性介绍HTML5学堂：在平日中书写滚动类特效时，为了提升代码的扩展性，通常会使用变量替换掉常量，此时会经常用到scrollLeft、offsetWidth、clientWidth等属性，今天我们就一起走进这几个属性。刘国利 - 独行冰海：最近日子，虽然身体稍微好些，但是也是被压得喘不过气来。主要也是自找的，原计划针对9班进行本年度的第四次课程大调整(主要是彻底调整JS)。正...
html滚动效果代码,javascript 实现滚动效果代码整理
weixin_33444829的博客
06-03 1841
1.先写两个最常用最简洁的滚动代码代码如下：水平滚动：水平滚动字幕内容垂直滚动：垂直滚动字内容2.平稳不间断滚动var tm=nullfunction newsScroll() {var scrollimg=document.getElementById("scroll")if(scrollimg.parentNode.scrollTop!=(scrollimg.clientHeight/2))s...
html文字滚动效果演示
05-24 1207
文字滚动演示 自己滚动吧自己滚动吧自己滚动吧自己滚动吧自己滚动吧自己滚动吧 自己滚动吧自己滚动吧自己滚动吧自己滚动吧自己滚动吧 自己滚动吧自己滚动吧自己滚动吧自己滚动吧自己滚动吧自己滚动吧 自己滚动吧自己滚动吧自己滚动吧自己滚动吧1自己滚动吧 自己滚动吧自己滚动吧自己滚动吧自己滚动吧2自己滚动吧 自己滚动吧自己滚动吧自己滚动吧自己3滚动吧自己滚动吧 自己滚动吧自己滚动吧自己
HTML标签marquee实现滚动效果
宜臶瑏芯的博客
11-23 869
HTML标签marquee实现滚动效果 目录 一、标签属性 二、事件 三、实例     正文   html标签 - 可以实现多种滚动效果，无需js控制。使用marquee标记不仅可以移动文字，也可以移动图片，表格等.只需要在内部输入要滚动的内容即可。 回到顶部 一、标签属性 1.滚动方向direction（包括4个值：up、 down、
实现页面侧边栏固定滚动效果的jQuery代码
在实现固定边栏时，需要处理滚动事件（scroll event），以便在页面滚动时更新边栏的位置，确保其能够正确地固定在页面上。jQuery提供了一个简单的滚动事件绑定方法，通过监听窗口的scroll事件，我们可以编写脚本来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值