开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

跟随滚动的侧边栏,但如果比视口高,则滚动自身

跟随滚动的侧边栏是一种网页设计技术，它可以在用户滚动页面时保持侧边栏的可见性。当页面内容超过视口高度时，侧边栏会自动滚动，以确保用户始终可以访问到侧边栏的内容。

这种设计模式的优势在于提供了更好的用户体验和导航功能。用户无需滚动到页面顶部或底部，就可以方便地访问侧边栏中的导航链接、搜索框、社交媒体图标等常用功能。这种设计模式尤其适用于长页面或需要频繁导航的网站，如新闻网站、博客、电子商务网站等。

在实现跟随滚动的侧边栏时，可以使用HTML、CSS和JavaScript来实现。通过CSS的position属性设置侧边栏为固定定位（position: fixed），使其保持在页面的固定位置。然后，使用JavaScript监听页面滚动事件，根据滚动的位置动态调整侧边栏的位置（通过修改CSS的top属性）。

腾讯云提供了一系列与网站开发和部署相关的产品，可以帮助开发者实现跟随滚动的侧边栏功能。以下是一些推荐的腾讯云产品和产品介绍链接：

腾讯云服务器（CVM）：提供可靠的云服务器实例，用于托管网站和应用程序。了解更多：https://cloud.tencent.com/product/cvm
腾讯云对象存储（COS）：提供高可用性、低成本的对象存储服务，用于存储和分发网站的静态资源。了解更多：https://cloud.tencent.com/product/cos
腾讯云CDN：提供全球加速的内容分发网络，用于加速网站的访问速度和提供更好的用户体验。了解更多：https://cloud.tencent.com/product/cdn

请注意，以上仅为示例，腾讯云还提供了许多其他与网站开发和云计算相关的产品和服务，具体选择应根据实际需求和项目要求进行。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

css粘性定位sticky

如果文章内容或图片资源失效，请留言反馈，我会及时处理，谢谢！...前言发现很多博客的侧边栏可以跟随滚动条移动到底部又可以继续翻看侧边栏，F12看了下代码，仅仅是用了一个sticky定位，下边我简单说一下sticky定位内容简介：讲 sticky 定位之前，我先说一下...position 的其他定位 absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。...元素在跨越特定阈值前为相对定位，之后为固定定位,设置了以上样式的元素，在 viewport 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。...之后，元素将固定在与顶部距离 10px 的位置，直到 viewport 视口回滚到阈值以下。

1.1K1 0

对定位的深入理解与应用

特点不会像浮动一样脱离文档流，只是视觉上的效果，不会对其他元素产生影响定位元素层级比层级元素高，所有定位层级相同：定位的元素会覆盖在普通元素上。...定位参考点参考定位元素的视口 **视口：对于 ****PC**浏览器来说，视口就是我们看网页的那扇“窗户” 特点脱离文档流，会对后面的兄弟元素、父元素有影响。...粘性定位通常用于创建吸顶效果或侧边栏固定效果，当用户滚动页面时，元素会始终保持在视口内的特定位置。...定位层级定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。如果位置发生重叠，默认情况是：后面的元素，会显示在前面元素之上。...视觉效果的实现：元素的宽高决定了它在包含块中的占据空间，设置了宽高后，可以确保元素在包含块中的位置是确定的，从而实现精确的居中效果。

951 0

Framer 使用滚动变体创建动画

“滚动变体”（Scroll Variants）允许您在页面上进入视口的部分上更改组件的活动变体。...您可以使用“滚动变体”使导航栏在用户向下滚动页面时更改其外观，例如更改其背景颜色或调整元素的位置。或者在向下滚动页面时突出显示活动部分的侧边栏。...当然有很多地方需要优化,但这不是重点....触发的时机呢,就是ViewPort, 视口的顶部,中部,底部到达浏览器窗口的顶部触发次数: 重复重复,即滚动下去触发一次, 滚动上去也依然会触发一次. To状态,组件的变化....当黑色部分在浏览器视口中,导航栏使用默认的组件当白色部分在浏览器视口中,导航栏使用黑色背景的导航栏组件当黄色部分在浏览器视口中,导航栏使用黄色背景的导航栏组件效果: 我们可以看到当滚动不到不同部分的时候

811 0

详解各种获取元素宽高及位置的属性

innerWidth window.innerWidth 是一个只读属性，表示浏览器视口（viewport）宽度（单位：像素），如果存在垂直滚动条则包括它。...var innerWidth = window.innerWidth; innerHeight window.innerHeight 是一个只读属性，表示浏览器窗口的视口（viewport）高度（以像素为单位...），如果存在水平滚动条则包括它。...outerWidth Window.outerWidth 是一个只读属性，表示整个浏览器窗口的宽度，包括侧边栏（如果存在）、窗口镶边（window chrome）和调正窗口大小的边框（window resizing...var outerWidth = window.outerWidth; outerHeight Window.outerHeight 是一个只读属性，表示获取整个浏览器窗口的高度（单位：像素），包括侧边栏

4K8 0

使用 position:sticky 实现粘性布局

按照常规做法，大概是监听页面 scroll 事件，判断每一区块距离视口顶部距离，超过了则设定该区块 position:fixed，反之去掉。...简单描述下生效过程，因为设定的阈值是 top:0 ，这个值表示当元素距离页面视口（Viewport，也就是fixed定位的参照）顶部距离大于 0px 时，元素以 relative 定位表现，而当元素距离页面视口小于...（请在 SAFARI 或者 CHROME53+ 下观看）：同理，也可以实现侧边导航栏的超出固定。...并且 top 和 bottom 同时设置时，top 生效的优先级高，left 和 right 同时设置时，left 的优先级高。...这里需要解释一下：如果 position:sticky 元素的任意父节点定位设置为 overflow:hidden，则父容器无法进行滚动，所以 position:sticky 元素也不会有滚动然后固定的情况

1.7K4 0

2023年即将推出的CSS特性对你影响大不大？

Web 开发人员今天面临的一个常见问题是准确且一致的全视口大小调整，尤其是在移动设备上。...作为开发人员，希望 100vh （视口高度的 100%）表示“与视口一样高”，但该 vh 单元不考虑移动设备上缩回导航栏之类的事情，因此有时它最终会太长并导致滚动。...为了解决这个问题，现在在 Web 平台上提供了新的单位值：小视口高度和宽度（或 svh 和 svw），表示最小的活动视口大小。较大的视口高度和宽度（lvh 和 lvw），表示最大大小。...动态视口高度和宽度（dvh 和 dvw）。...每个点不是围绕其自身的中心旋转然后向外移动，而是在 X 和 Y 轴上平移。X 轴和 Y 轴上的距离分别通过考虑 --angle 的 cos() 和 sin() 来确定。

2033 0

【如果你要学JS XIII】——实现放大镜效果、client&scroll属性、固定侧边栏

1.如何实现放大镜效果思维整理：1.鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示,离开隐藏2个盒子功能2.黄色的遮挡层跟随鼠标功能。3.移动黄色遮挡层,大图片跟随移动功能。html，css代码<!...返回自身实际的宽度，不含边框,返回数值不带单位element.scrollHeight 返回自身实际的高度，不含边框，返回数值不带单位如果浏览器的高(或宽)度不足以显示整个页面时,会自动出现滚动条...当滚动条向下滚动时,页面上面被隐藏掉的高度,我们就称为预面被卷去的头部。滚动条在滚动时会触发onscroll事件。4.固定侧边栏<!...(bannerTops); // 若页面被卷去的头部大于bannerTops的话就让侧边栏改为固定定位 document.addEventListener('scroll',...，这些功能是经常见的，也是基于js而实现的，如果能给你带来帮助那还请用发财的小手点个赞吧！

4681 0

CSS | 视差滚动 | 笔记

z>0 的三维元素比正常大，而 z<0 时则比正常小，大小程度由该属性的值决定。元素涉及 3d 变换时，perspective可以让我们眼睛看到 3d 立体效果，有空间感。...，但只有当其对应容器抵达视口时才能显示对应可视区域的背景图。...核心问题是移动浏览器(Chrome和Safari)有一个“帮助”功能，地址栏有时可见，有时隐藏，改变了视口的可见大小。...这些浏览器没有将 100vh 的高度调整为视口高度变化时屏幕的可见部分，而是将 100vh 设置为隐藏地址栏的浏览器高度。...遗憾的是，仍然没有一种简单的方法可以让一个元素在不依赖javascript的情况下占据整个视口高度。 height: 100vh 是如此接近伟大，但考虑到它在移动设备上的局限性，最好避免它。

7282 1

Dash应用页面整体布局技巧

，可以利用css中的calc()动态计算高度，即页面视口整体高度100vh减去页首部分占据的64px高度：本示例完整代码见文章开头附件地址中的app1.py。...示例2：粘性页首+内容布局在前面的示例1中，若页面内容区域较长，页首部分会随着用户滚动页面而被滚上去，如果我们希望应用中的页首部分一直紧贴页面顶端，就像下面的示例2所示：最简单的方式就是在前面示例...示例3：固定的侧边菜单栏+粘性页首+内容布局在前面的两个例子中，我们的页面中充当导航作用的只有位于页首右侧的一级导航菜单栏，如果我们的应用功能进一步复杂起来，需要在当前一级菜单栏对应页面下再设立二级导航菜单...，经典的方式是像下面的例子那样，在原本的内容区中分出一部分宽度放置侧边菜单栏：且为了更现代化的交互效果，新加入的侧边菜单栏是处于固定状态的，与内容区域相互独立：要实现这样的经典页面布局效果，我们只需要在前面示例...属性开启竖向滚动条，而最关键的固定效果则同样是基于AntdAffix实现的，只不过这里的offsetTop需要考虑页首部分高度，所以设置为64：本示例完整代码见文章开头附件地址中的app3.py。

5222 0

整理获取 viewport 和 element 尺寸和位置方法

整理获取 viewport 和 element 尺寸和位置方法 ⭐️ 更多前端技术和知识点，搜索订阅号 JS 菌订阅视口页面或窗口的位置和宽高获取视口宽高下面方法是包括滚动条的宽高，不支持 IE8...window.innerWidth window.innerHeight width + padding + border + 滚动条另外 outerWidth 浏览器兼容差，可获取包括工具栏的宽高...document.documentElement，那么返回的是不包含滚动条的视口尺寸如果是 document.body，并且是在混杂模式下，那么返回的是不包含滚动条的视口尺寸 clientLeft/...document.documentElement，返回的是视口滚动区域宽度和视口宽度中较大的那个如果元素是 document.body，并且是在混杂模式下，那么返回的是视口滚动区域宽度和视口宽度中较大的那个...scrollLeft/scrollTop 这个方法返回元素滚动条的位置如果元素是根元素，那么返回 window.scrollY 的值如果元素是 body，并且在混杂模式下，那么返回的是 window.scrollY

1.3K2 0

JavaScript代码获取浏览器的可视高、文档滚动高和滚动距离

if (document.body) { // 如果 document.documentElement.scrollTop 不存在，但 document.body 存在 scrollTop...把滚动条滚动到最底下，滚动的距离就是滚动高-可视高。...下面的表格展示了文档中用到的几种属性含义和用法：属性含义示例 document.documentElement.clientHeight 文档根元素的视口高度，不包括滚动条、边框和外边距。...var clientHeight = document.documentElement.clientHeight; document.body.clientHeight 文档的元素的视口高度...var clientHeight = document.body.clientHeight; window.innerHeight 浏览器窗口的视口高度，不包括浏览器的工具栏、菜单栏等。

3210 0

waypoint_使用jQuery Waypoint创建粘性导航标题

最重要的是，您将熟悉jQuery Waypoints插件的基础知识，该插件将提供高级功能：当用户向下滚动时，导航栏将停留在视口的顶部，并进行更改以指示当前部分。...当用户向下滚动时，表达式direction==='down'计算结果为true ，因此我们的导航栏将接收到sticky类，并停留在视口的顶部。...如果您的设计需要它，则导航栏上方的小坡度也可能是不错的选择。...如果我们向下滚动，则航路点所属的部分与变为活动状态的部分相同。但是，向上滚动经过一个航路点就意味着它是前面的部分，因此我们使用.prev()进行选择。...如果您不仅仅想添加和删除类，还可以考虑使用LavaLamp这样的插件。在某些时候，您可能已经注意到，单击导航栏中的链接会将部分的顶部置于浏览器视口的顶部。

3.3K3 0

前端成神之路-WebAPIs05

移动黄色遮挡层，大图片跟随移动功能。 1.1.7. 案例分析: 黄色的遮挡层跟随鼠标功能。把鼠标坐标给遮挡层不合适。因为遮挡层坐标以父盒子为准。首先是获得鼠标在盒子的坐标。...页面被卷去的头部如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发 onscroll事件。...1.3.3.案例：仿淘宝固定右侧侧边栏原先侧边栏是绝对定位当页面滚动到一定位置，侧边栏改为固定定位页面继续滚动，会让返回顶部显示出来 1.3.4.案例分析: 需要用到页面滚动事件 scroll...一定要写到滚动的外面 var bannerTop = banner.offsetTop // 当我们侧边栏固定定位之后应该变化的数值 var sliderbarTop...// 3 .当我们页面被卷去的头部大于等于了 172 此时侧边栏就要改为固定定位 if (window.pageYOffset >= bannerTop) {

1.5K1 0

CSS 定位详解

它如果搭配top、bottom、left、right这四个属性一起使用，表示元素的初始位置是基于视口计算的，否则初始位置就是元素的默认位置。...因此，它能够形成"动态固定"的效果。比如，网页的搜索工具栏，初始加载时在自己的默认位置（relative定位）。 ? 页面向下滚动时，工具栏变成固定位置，始终停留在页面头部（fixed定位）。 ?...等到页面重新向上滚动回到原位，工具栏也会回到默认位置。...它的具体规则是，当页面滚动，父元素开始脱离视口时（即部分不可见），只要与sticky元素的距离达到生效门槛，relative定位自动切换为fixed定位；等到父元素完全脱离视口时（即完全不可见），fixed...，#toolbar的父元素开始脱离视口，一旦视口的顶部与#toolbar的距离小于20px（门槛值），#toolbar就自动变为fixed定位，保持与视口顶部20px的距离。

1.8K4 0

BOM核心——window对象之窗口

moveBy是接收当前位置在这俩个方向上移动的像素值。窗口大小所有浏览器都支持四个窗口大小的属性。 outerWidth，outerHeight是浏览器窗口自身的大小，就是我们当前浏览器的大小。...innerWidth,innerHeight是浏览器窗口中页面视口的大小，不包含我们的调试工具栏还有浏览器边框。...这个还挺实用的，我们可以通过媒体查询来设置响应式，但有时候我们列表需要通过页面视口的宽度来判断是不是切换俩个还是切换四个，然后实现新闻列表的切换，我们在js肯定是要判断浏览器窗口大小的。...视口位置我们浏览网页的时候肯定不可能一下子全部显示完，都需要用滚轮来往下翻动。...// 相对于当前视口向下滚动 80 像素 window.scrollBy(0, 80); // 相对于当前视口向右滚动 40 像素 window.scrollBy(40, 0);

8912 0

「JavaScript 」动画基础 - 01

移动黄色遮挡层，大图片跟随移动功能。 1.1.7. 案例分析: 黄色的遮挡层跟随鼠标功能。把鼠标坐标给遮挡层不合适。因为遮挡层坐标以父盒子为准。首先是获得鼠标在盒子的坐标。...页面被卷去的头部如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发onscroll事件。...1.3.3.案例：仿淘宝固定右侧侧边栏原先侧边栏是绝对定位当页面滚动到一定位置，侧边栏改为固定定位页面继续滚动，会让返回顶部显示出来 1.3.4.案例分析: 需要用到页面滚动事件 scroll...一定要写到滚动的外面 var bannerTop = banner.offsetTop // 当我们侧边栏固定定位之后应该变化的数值 var sliderbarTop = sliderbar.offsetTop...页面被卷去的头部 // console.log(window.pageYOffset); // 3 .当我们页面被卷去的头部大于等于了 172 此时侧边栏就要改为固定定位 if

5031 0

响应式设计

这一点恰好跟可访问性的关注点不谋而合：一个屏幕阅读器优先读到“重要的内容”，或者用户使用键盘浏览时先获取到文章里的链接，然后才是侧边栏里的链接。话虽如此，这也不是一条铁律。...固定容器（比如，设定了 width: 800px 的元素）在小屏上会超出视口范围，导致需要水平滚动条，而流式容器会自动缩小以适应视口。...在流式布局中，主页面容器通常不会有明确宽度，也不会给百分比宽度，但可能会设置左右内边距，或者设置左右外边距为 auto，让其与视口边缘之间产生留白。也就是说容器可能比视口略窄，但永远不会比视口宽。...在主容器中，任何列都用百分比来定义宽度（比如，主列宽 70%，侧边栏宽 30%）。这样无论屏幕宽度是多少都能放得下主容器。...网页默认就是响应式的。没添加 CSS 的时候，块级元素不会比视口宽，行内元素会折行，从而避免出现水平滚动条。加上 CSS 样式后，就需要来维护网页的响应式特性了。

2.1K1 0

js获取各种距离和宽高

返回窗口内部的高度/宽度(不包含工具栏和滚动条) window.pageXOffset/window.pageYOffset 文档在窗口左上角水平和垂直方向滚动的像素 window.pageYOffset...以浏览器窗口(视口)的左上角为原点, 距离视口顶部距离, 不随页面滚动而改变 clientY 以浏览器窗口(视口)的左上角为原点, 距离视口左侧距离, 不随页面滚动而改变 pageX 以整个页面的左上角为原点...以计算机显示屏屏幕左上角为原点, 距离屏幕左侧的距离元素的宽高及各种距离宽高属性说明 clientHeight/clientWidth 包括元素的可视部分的高度/宽度包括width/height...和padding不包括border和滚动条如果是content-box,则为width+2*padding如果是border-box,则为width-2*padding offsetHeight/offsetWidth...包括元素的width/height+padding+border 如果是content-box,为width+2*padding+2*border如果是border-box的话就等于width scrollHeight

2311 0

盒模型

# 元素宽度的问题盒模型的默认行为,当给一个元素设置宽或高的时候，指定的是内容的宽或高，所有内边距、边框、外边距都是追加到该宽度上的。如果这些值使用不同的单位，情况就会更复杂。...（比如侧边栏）的宽度。...内容会填满视口的宽度，然后在必要的时候折行。因此，容器的高度由内容天然地决定，而不是容器自己决定。普通文档流——指的是网页元素的默认布局行为。...不过更好的方式是用视口的相对单位 vh，100vh 等于视口的高度。...为了应对更多变化，可以使用更通用的解决方案：猫头鹰选择器。猫头鹰选择器的顶部外边距对侧边栏有个副作用。因为侧边栏是主列的相邻兄弟元素，所以它也会有顶部外边距。

1.9K2 0

IntersectionObserver API 使用教程

网页开发时，常常需要了解某个元素是否进入了"视口"（viewport），即用户能不能看到它。上图的绿色方块不断滚动，顶部会提示它的可见性。...传统的实现方法是，监听到scroll事件后，调用目标元素（绿色方块）的getBoundingClientRect()方法，得到它对应于视口左上角的坐标，再判断是否在视口之内。...一次是目标元素刚刚进入视口（开始可见），另一次是完全离开视口（开始不可见）。...()方法的返回值，如果没有根元素（即直接相对于视口滚动），则返回null boundingClientRect：目标元素的矩形区域的信息 intersectionRect：目标元素与视口（或根元素）的交叉区域的信息...四、实例：惰性加载（lazy load）有时，我们希望某些静态资源（比如图片），只有用户向下滚动，它们进入视口时才加载，这样可以节省带宽，提高网页性能。这就叫做"惰性加载"。

1.9K6 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭