如何让 div 在滚动到屏幕顶部后粘在屏幕顶部?

2024-04-12

我想创建一个 div,它位于内容块下方,但是一旦页面滚动到足以接触其顶部边界,它就会固定在适当的位置并随页面滚动。


您可以简单地使用 css,将元素定位为fixed https://developer.mozilla.org/en-US/docs/Web/CSS/position:

.fixedElement {
    background-color: #c0c0c0;
    position:fixed;
    top:0;
    width:100%;
    z-index:100;
}

Edit:您应该拥有绝对位置的元素,一旦滚动偏移到达该元素,就应该将其更改为固定,并且顶部位置应设置为零。

您可以使用以下命令检测文档的顶部滚动偏移量滚动顶部 http://docs.jquery.com/CSS/scrollTop功能:

$(window).scroll(function(e){ 
  var $el = $('.fixedElement'); 
  var isPositionFixed = ($el.css('position') == 'fixed');
  if ($(this).scrollTop() > 200 && !isPositionFixed){ 
    $el.css({'position': 'fixed', 'top': '0px'}); 
  }
  if ($(this).scrollTop() < 200 && isPositionFixed){
    $el.css({'position': 'static', 'top': '0px'}); 
  } 
});

当滚动偏移达到200时,元素将stick到浏览器窗口的顶部,因为放置为固定的。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何让 div 在滚动到屏幕顶部后粘在屏幕顶部? 的相关文章

  • 使用 JavaScript 生成 PDF 文件

    我正在尝试将 XML 数据从网页转换为 PDF 文件 并且希望能够完全在 JavaScript 中完成此操作 我需要能够绘制文本 图像和简单的形状 我希望能够完全在浏览器中完成此操作 我刚刚写了一个名为jsPDF https github
  • 如何向 Rails 应用程序添加自定义字体?

    我想在 RoR 应用程序中使用几种字体 但它们的格式主要是 ttf 和 otf 等 我该如何将这些文件嵌入到我的 Rails 应用程序中 也就是说 一旦我将它们放入我的资产文件夹中 将它们嵌入我的 CSS 和 或 LESS 文件中的语法到底
  • 如何从 JSON 响应重定向?

    所以我尝试使用 Flask 和 Javascript 上传器 Dropzone 上传文件并在上传完成后重定向 文件上传正常 但在烧瓶中使用传统的重定向 return redirect http somesite com 不执行任何操作 页面
  • 淘汰赛绑定,每个都可进行自定义

    我这里有一个情况 用于淘汰每个带有定制的绑定 这是我的代码 div div table tbody tr td td td td tr tbody table div div
  • 为什么将 x 和 y 设置为 0 时 svg 文本会消失?

    我刚刚开始阅读有关svg我提出了以下问题 我正在创建一个简单的svg with a text里面如下图所示 从我的阅读中我了解到x and y of the text标签声明文本在标签内的位置svg space 为什么当我同时设置x and
  • 在 React Navigation 中将 props 传递给自定义抽屉导航器

    在反应导航抽屉菜单中 我想显示用户名 John Doe 它处于我的主要组件的状态 Router 我怎样才能将自定义抽屉内容组件传递给它 额外信息 我从 AsyncStorage 中获取此名称 组件已挂载 这是我的代码 export defa
  • Google 地图 API:忽略 DirectionService 请求中的季节性限制

    我目前正在开发一张地图 其中显示两点之间的最短路线 使用不同的交通工具 我注意到 有时 例如在冬季关闭的道路不会被考虑在内 我发现我可以使用方向服务 下面的代码 忽略高速公路 收费站和渡轮 但我一生都无法弄清楚如何 是否可以忽略季节性限制
  • 获取点击的的DOM路径

    HTML div class lol a class rightArrow href a div 伪代码 rightArrow click function rightArrowParents this dom dom is the pse
  • 如何打开弹出窗口并用父窗口中的数据填充它?

    如何使用 JavaScript jQuery 使用父页面中 JS 变量的数据填充弹出窗口 在我的示例中 我有一个文件名数组 我在父窗口中最多列出五个 如果还有更多 我想提供一个链接来打开弹出窗口并列出数组中的每个帖子 因此 如果我打开一个包
  • jQuery - 系列之外的 HighCharts 标签(条形图)

    function container highcharts chart type bar backgroundColor null width 360 title text null style display none subtitle
  • 如何处理requireJs超时错误?

    我正在使用 require js 作为加载框架编写一个移动混合应用程序 我遇到加载错误的问题 我想做的是在设备离线且无法下载在屏幕上显示地图所需的 google 地图 API 脚本时设置后备解决方案 我得到的只是 Uncaught Erro
  • 如何限制下拉列表更改而不禁用它

    如何在不禁用下拉列表的情况下限制下拉列表选项更改 意味着我无法更改选项 并且下拉列表不应该是只读的 我的问题是我的服务器没有读取禁用的元素 这是我的出价 http jsfiddle net m3v7y jQuery var lastSel
  • 如何强制外部 div 扩展到内部 div 的高度?

    我有 ajax 到的数据 div class content 我希望外部 div 扩展到内部 div 的高度 我不知道该怎么做 HTML div class outer div class inner div class content S
  • JavaScript 数组扩展语法的时间复杂度是多少?

    我想知道在 JavaScript 中使用数组扩展的时间复杂度是多少 是线性 O n 还是常数 O 1 下面的语法示例 let lar Math max nums 传播称为 Symbol iterator 有关对象的属性 对于数组 这将迭代数
  • 如何让div与包含td的高度相匹配?

    我沿着桌子的一排布置了三个 面板 一个比另外两个高 我希望所有三个面板都与最高的一个的高度相匹配 我尝试将 div 的样式设置为 height 100 但是即使包含的 tds 增长 短面板仍然很短 我的 HTML 是由 JSF 生成的 因此
  • IE 中的每个 JavaScript 支持?

    我有这个代码
  • mozilla pdf.js 没有全视图

    我喜欢这个 pdf 查看器https github com mozilla pdf js https github com mozilla pdf js Demo http mozilla github com pdf js web vie
  • 当复选框条件更改时,如何使用ajax更新mysql数据库?

    我有一个在客户端按行显示的文章表 每篇文章都有一个唯一的 ID 并包含一个复选框以指示该文章是否被选中为收藏夹 如果它是最喜欢的 则该复选框已被选中 如果没有 则未选中 现在 如果特定于每一行的复选框条件发生变化 我需要 js 或 jque
  • Flowtype 属性“msg”缺失为 null 或未定义

    我发现 Flow 很难用 我明白那个Array find可以返回或未定义 因此 通过阅读以下内容 github Array find on Array 引发 https github com facebook flow issues 351
  • 在 PHP 中模拟 jQuery.ajax 请求

    我必须在 PHP 中模拟 AJAX 请求 就像在 jQuery 中一样 我当前的代码在这里 原始 AJAX 调用 不得修改 ajax type POST url someFile php data data success function

随机推荐