锚点定位

2023-12-03

我有一个使用 WordPress 垂直滚动创建的长垂直网站'parallax' 输入主题。所有内容区域都是通过“帖子”创建的 - 帖子标题是 H1。

我在页面顶部创建了一个粘性菜单,调用我在帖子标题中设置的锚点,以尝试获得最准确的定位。例如下面。

<a name="ebook"></a>Ebook

这不起作用,因为现在它滚动到仅显示一半内容的点,因为我的粘性菜单覆盖了我设置锚点的标题区域。因此它会向下滚动,菜单覆盖一半的内容。

所以,我想如果我为我的锚点分配一个类,并将其边距增加约 200 像素,以使锚点滚动到正确的内容,会怎么样。这也行不通。Eg below

 <a name="ebook" class="anchor"></a>Ebook

有人可以指导我解决这个问题吗?我需要将锚点放置在 Wordpress 帖子/内容区域上方约 200 像素处,以便内容能够完美显示。

(我已经在使用smoothscroll.js创建锚点之间的平滑过渡,并且不想考虑实现额外的或不同的 JS / 我正在寻找 CSS 解决方案。 )


这有点不清楚(一个例子就更好了),但如果我理解正确的话,我想我自己过去也遇到过类似的问题。一个<a>总是会跳到页面顶部,所以如果你有一个粘性导航,它会覆盖<a>信息(我认为这是你首先所说的一部分)。我不知道为什么你觉得你需要 200px (这还不清楚)。

然而,这就是我要做的:set a block or inline-block显示和一个padding-top在你的<a>标签的高度至少等于粘性导航的高度。这将做的是将顶部a仍在页面顶部,但允许文本向下移动。然后,您可以将内容放置在距底部任意距离的位置a.

例子:http://jsfiddle.net/6zAYw/6/

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

锚点定位 的相关文章

  • 在 R 中修改传单弹出窗口

    我想修改 R 中传单弹出窗口的外观 帮助文件指出 in the popupOptions 函数需要 传递给底层 Javascript 对象构造函数的额外选项 In 这个例子 https rstudio github io leaflet p
  • 如何居中对齐数据表标题

    我是数据表新手 当我制作表格标题时 它总是左对齐 如何将标题设置为居中对齐 我已阅读 datatables net manual styling classes 和 datatables net reference option colum
  • BeautifulSoup4:选择属性不等于x的元素

    我想做这样的事情 soup find all td attrs class foo 我想找到所有不具有 foo 类的 td 显然上面的方法不起作用 那怎么办呢 BeautifulSoup确实使 汤 变得美丽且易于使用 You 可以传递一个函
  • 固定 Div 与静态 div 的滚动条重叠

    我无法按照我想要的方式设计布局 我有一个内容区 content 您可以在示例图像中看到的灰色 里面有一个黄色元素 这个div是position static height 100 现在我有一个 left paneldiv 也 与positi
  • 使用 jQuery inputmask 插件范围 0-100

    如何创建 0 到 100 范围内的掩码 document ready function masked inputmask 您可以使用jquery inputmask regex extensions js为了那个原因 你可以找到带有所有扩展
  • Firefox 忽略 CSS 中的最小高度

    由于某些原因 最小高度在 Firefox 上不起作用 我尝试在 body 上设置 min height 但 Firefox 完全忽略了它 由于我的页面是动态的 我不能只将高度设置为 100 我应该怎么办 body border 1px so
  • 对其中一个具有相同 tabindex 的焦点的所有元素应用相同的效果

    在我的上一篇文章中 我问了如何通过 css 选择器使不可聚焦的元素变得可聚焦 答案是使用tabindex 现在我希望 当具有选择器的元素获得焦点 单击 时 选择器选择的另一个元素也能获得效果 这可能听起来很奇怪 但我很久以前就可以不小心这样
  • 取消选择所有复选框后,客户端过滤器显示所有项目

    加载时 复选框将取消选中 并显示所有列表项 当选中过滤器时 将显示相关的列表项 我遇到的问题是 当您再次取消选中所有复选框时 我需要显示所有项目而不是隐藏 这是我的小提琴 http jsfiddle net amesy B9Hnu 124
  • POSTed 数组保留其值

    今天 我注意到我的一个 WordPress 安装的行为方式非常奇怪 每当我从仪表板更新帖子时 它的一些额外输入都会保留它们已有的值 所有这些都是多维数组 例如 post php post 123 action 编辑
  • 如何显示接下来的三个图像单击加载更多按钮

    我需要一个加载更多按钮来显示图像 页面加载时 我显示 3 个图像 单击 加载更多 按钮后 接下来的 3 个图像将显示在屏幕上 我尝试了下面的代码 但它不起作用 你能帮我解决这个问题吗 function item slice 0 2 show
  • Bootstrap 4 移动导航栏消失

    我刚刚从 Bootstrap 3 转换为 Bootstrap 4 但我的移动导航栏出现问题 使用切换按钮展开导航栏时 导航消失 我不明白为什么会发生这种情况 导航栏下方有一个大屏幕 但整个移动导航向上移动 如下面的 gif 所示 以下是导航
  • 使用 float:left 与 display:inline-block 的 jQuery UI 拖放排序比较

    我这里有两个例子 这两个例子之间的唯一区别是 一种使用display inline block 另一种使用float left li doc item 显示 内联块 与 li doc item float left 我的问题是 displa
  • 从链接打开本地文件夹

    如何通过单击任何链接打开本地文件夹视图 我尝试了很多选择 例如 a href Open folder a or a Open folder a or a Open folder a 解决方案 启动可下载链接 以下内容适用于所有浏览器 但一如
  • 如何更改 HTML 文档的“实际编码”?

    我通过 W3C HTML 验证器运行我的网页并收到此错误 编码ascii不是字符的首选名称 使用中的编码 首选名称是 us ascii Charmod C024 第 5 行 第 70 列 内部编码声明 utf 8 不同意 文档的实际编码 u
  • 如何将MathJax公式转换为img

    Mathjax 现在在我的项目中运行良好 但有一个问题 有没有办法将MathJax的公式 纯html和css 转换成img文件 我可以保存 MathJax 可以配置为生成 SVG 看http docs mathjax org en late
  • WordPress 子文件夹安装重定向到根目录

    我遇到了一个奇怪的问题 我有我的主站点 mesopinions ca 它是一个 WordPress 安装 我还有几个子域 有自己的 WordPress 安装 无多站点 它与 concours mesopinions ca 子文件夹配合得很好
  • 为什么这些内联块元素会产生额外的宽度?

    这是这个问题的后续内容 仅使用 css 自动调整图像下的文本 https stackoverflow com questions 34185547 autofit text under image with only css 为什么这段代码
  • 为什么我的 Web 组件 CSS 不显示?我没有使用shadowDOM

    我有一个没有使用 ShadowDOM 的 Native V1 组件 所以我将 CSS 放在 但是当其他人使用我的组件时 我的 CSS 就不再起作用了 仅当其组件确实使用 ShadowDOM 时才会发生这种情况 我的组件的示例代码 class
  • Flexbox 项目的完美圆形边框半径[重复]

    这个问题在这里已经有答案了 我有类似这样的项目 它们是弹性盒容器内的弹性项目 我的正常尺寸物品 我的物品被挤压 我的 CSS 看起来像这样 body display flex flex direction column align item
  • 将引导程序弹出框保留在视口内

    我正在尝试使用带有按钮的侧边栏创建一个菜单 每个按钮都有一个指定的包含相关数据的弹出窗口 不幸的是 其中一个弹出窗口可能包含任意数量的行 并且在某些情况下它可能部分位于视口之外 See http jsfiddle net bfd9f 1 h

随机推荐

  • 动画切换按钮

    我已经创建了动画切换 如果android checked true 即 它可以从 1 9 播放 但是如果android checked false 它卡在了drawable 10 但应该从10 20开始播放 从那时起它就完美了 但是当应用程
  • Swift 通用数组“不相同”错误

    我只是在浏览一些 Swift 的内容 这些内容在 Beta3 中显然已经过时了 func exchange
  • EF4.2 额外左外连接到同一个表

    我知道已经有一些关于此的问题 大多数与已解决的旧问题或多个表有关 我看到的任何其他 左外连接 问题都没有涵盖这个问题 我得到了INNER JOIN and LEFT OUTER JOIN在同一个查询中访问同一个表 表格概要 Users id
  • Android:捕获活动的返回

    我有一个关于开展新活动的问题 归根结底就是这样 我的视图上有 3 个选项卡 A contains gMap activity B camera activity C some random text fields 要求是应用程序以纵向模式运
  • 是否可以在 android gradle 中将 git 存储库声明为依赖项?

    我想使用 mavencentral 的库的主版本 是否可以在 android gradle 中将 git 存储库声明为依赖项 对我来说最好的方法是 https jitpack io 步骤 1 将 JitPack 存储库添加到存储库末尾的 b
  • OmniSharp.MSBuild.ProjectManager 无法在 Linux 上加载项目

    我正在我的 Manjaro Linux 笔记本上学习 C 我尝试安装 ms vscode csharp 扩展 但是在打开任何 NET Core 项目时 我收到以下错误消息 某些项目加载时遇到问题 请查看输出以了解更多信息 信息 我尝试设置
  • setuptools:包数据文件夹位置

    我使用 setuptools 来分发我的 python 包 现在我需要分发额外的数据文件 根据我从 setuptools 文档中收集的信息 我需要将数据文件放在包目录中 但是 我宁愿将数据文件放在根目录的子目录中 我想避免的 root sr
  • 如何防止点击页面按钮后 Django 表单被重置

    我有一个 Django 表单 它接受用户的输入值 然后使用这些值对表进行查询ResourceBase 最终返回过滤结果的列表 由于结果可能是一个很长的列表 我添加了带有 上一页 和 下一页 按钮的分页功能 我的问题是 当我单击 上一个 或
  • 使用 gsub 从 R 中的数据集中删除主题标签、超链接和 Twitter 句柄

    我已经搜索过 但一无所获 可能是因为我对 R 非常陌生 不理解 并且被吓倒 模式匹配和正则表达式替换的逻辑 语法是如何工作的 所以我希望有人可以帮助我使用 R 中删除主题标签所需的特定代码 例如 trump 删除超链接 例如pic twit
  • 如何执行浏览器内对比度拉伸/标准化?

    我的网页上有 jpeg 我想在没有浏览器插件的情况下对这些图像执行客户端均衡 对比度拉伸 我也接受直方图均衡的解决方案 我目前使用两个 CSS 过滤器组合的较差近似值 webkit filter contrast brightness 我希
  • 文件下载到 Cordova 中的 Android 下载文件夹

    这是代码 function downloadCL document addEventListener deviceready init false The directory to store data var store var asse
  • 如何使实体框架数据上下文只读

    我需要向第三方插件公开实体框架数据上下文 目的是允许这些插件仅获取数据 而不是让它们发出插入 更新或删除或任何其他数据库修改命令 因此 我怎样才能使数据上下文或实体只读 除了与只读用户连接之外 您还可以对 DbContext 执行一些其他操
  • 如何在不暂停脚本的情况下监听 STDIN 输入?

    我有一个while循环持续侦听传入连接并将其输出到控制台 我希望能够通过控制台发出命令而不影响输出 我试过了 Thread new do while true input gets chomp puts So I herd u sed in
  • 如何在 Swift 中的路径中查找没有路径扩展的文件的文件 UTI

    我一直在尝试转换我从中得到的代码example 在 Objective c 中 没有运气 String path contains the file path Get the UTI from the file s extension CF
  • Java中的按位右移运算符

    在 Java 中 4 gt gt 2 给出 1 但 5 gt gt 2 给出 2 有人能解释一下为什么吗 这是示例代码 byte r 5 r gt gt 2 System out println r 同样在这种情况下 gt gt 和 gt
  • Facebook Connect 在模拟器/设备上的工作方式不同,但在 Google Play 上则不然

    我的应用程序中出现奇怪的 Facebook 连接行为 如果我在模拟器中使用它 则对 facebook request 用于检索用户数据 和 facebook dialog 用于在墙上发布 的调用是在 facebook authorize g
  • 如何从 vNext 构建代理上的自定义脚本加载 PowerShell 模块?

    我正在使用标准 TFS vNext 构建步骤来执行 PowerShell 脚本 在脚本中 我尝试利用标准 TFS 代理模块中的一些功能 此处列出 http blog majcica com 2015 11 14 available modu
  • 从 TWIG 模板访问会话

    我在网上搜索了很多如何访问全局 SESSION从 TWIG 模板中获取数组并发现 app session get index 但是当我调用它时 它返回一个空字符串 我有一个 SESSION filter accounts 我在调用时收到此错
  • 使用 dplyr 填充缺失值(通过连接?)

    我有一个数据框 df1 其中缺少一些值 城市 州 SiteID City StateBasedIn Lat Lon Var1 Var2 4227 Richmond KY 39 113 6 0 4987 Nashville TN 33 97
  • 锚点定位

    我有一个使用 WordPress 垂直滚动创建的长垂直网站 parallax 输入主题 所有内容区域都是通过 帖子 创建的 帖子标题是 H1 我在页面顶部创建了一个粘性菜单 调用我在帖子标题中设置的锚点 以尝试获得最准确的定位 例如下面 a