javascript - 从固定顶部导航栏偏移目标面板-6ren

javascript - 从固定顶部导航栏偏移目标面板

转载作者：太空宇宙更新时间：2023-11-04 08:04:36

我有一个 anchor 标签 <a href="#target">jump</a>重定向到 target控制板。这个面板在被重定向后，隐藏在我的固定顶部导航栏后面。我在 CSS 中尝试了 2 种不同的方法来偏移面板，但它们无法正常工作。

有没有一种方法可以将面板从导航栏中偏移，但仍将其边框保持在正确的位置？最好只使用 CSS 和 HTML。

body {
  padding-top: 50px;
}

#mytarget {
  border-color: red
}

/* This doesn't work */
/*#mytarget:before { 
  display: block; 
  content: " "; 
  margin-top: -50px; 
  height: 50px; 
  visibility: hidden; 
}*/


/* This works but border overlaps */
#mytarget:target {
  padding-top: 50px;
  margin-top: -50px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My page</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">Fixed Top Navbar</div>
  </nav>

  <div>Click on panel headers to open all panels, then <a href="#mytarget">jump to target</a></div>
  <div class="panel-group">
    <div class="panel panel-default">
      <div class="panel-heading" data-toggle="collapse" href="#panel1">
        <h3 class="panel-title">Panel Header 1</h3>
      </div>
      <div id="panel1" class="panel-collapse collapse">
        <div class="panel-body">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
      </div>
    </div>

    <div class="panel panel-default" id="mytarget">
      <div class="panel-heading" data-toggle="collapse" href="#targetpanel">
        <h3 class="panel-title">Target Panel Header</h3>
      </div>
      <div id="targetpanel" class="panel-collapse collapse">
        <div class="panel-body">Target Panel Body Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

        </div>
      </div>
    </div>

    <div class="panel panel-default">
      <div class="panel-heading" data-toggle="collapse" href="#panel3">
        <h3 class="panel-title">Panel Header 3</h3>
      </div>
      <div id="panel3" class="panel-collapse collapse">
        <div class="panel-body">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

        </div>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>

</html>

最佳答案

防止 anchor 填充/边距影响面板样式的唯一方法是将它们分开。您可以:

将 id 移动到 <h3>元素而不是面板元素，因为它被设置为没有填充、边距或边框，因此不会影响其显示，或者
创建单独的 anchor 元素，您可以单独设置样式。

如果您要创建单独的 anchor 元素，请将 anchor 添加为面板中的第一个元素:

<div class="panel panel-default">
   <a id="mytarget"></a>
   <div class="panel-heading" data-toggle="collapse" href="#targetpanel">
       [...]

并使您的 anchor 的 CSS 为:

#mytarget:target {
  padding-top: 50px;
  margin-top: -50px;
  display:block;
}

工作示例:

body {
  padding-top: 50px;
}

#mytarget {
  border-color: red
}

#mytarget:target {
  padding-top: 50px;
  margin-top: -50px;
  display:block;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My page</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">Fixed Top Navbar</div>
  </nav>

  <div>Click on panel headers to open all panels, then <a href="#mytarget">jump to target</a></div>
  <div class="panel-group">
    <div class="panel panel-default">
      <div class="panel-heading" data-toggle="collapse" href="#panel1">
        <h3 class="panel-title">Panel Header 1</h3>
      </div>
      <div id="panel1" class="panel-collapse collapse">
        <div class="panel-body">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
      </div>
    </div>

    <div class="panel panel-default">
       <a id="mytarget"></a>
       <div class="panel-heading" data-toggle="collapse" href="#targetpanel">
        <h3 class="panel-title">Target Panel Header</h3>
      </div>
      <div id="targetpanel" class="panel-collapse collapse">
        <div class="panel-body">Target Panel Body Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

        </div>
      </div>
    </div>

    <div class="panel panel-default">
      <div class="panel-heading" data-toggle="collapse" href="#panel3">
        <h3 class="panel-title">Panel Header 3</h3>
      </div>
      <div id="panel3" class="panel-collapse collapse">
        <div class="panel-body">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

        </div>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>

</html>

关于javascript - 从固定顶部导航栏偏移目标面板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46751989/

文章推荐： c - 我如何在 GTK3 中改变 GtkDrawingArea 上的鼠标光标？

文章推荐： java - 从主题开头接收消息

文章推荐： python - 如何使列表中的变量可识别为数字？

文章推荐： java - 移动物体不会停留在设定的范围内？

unit-testing - CMake:目标 "test"不构建测试，目标 "all"构建测试
我创建了一个基于命令行可移植脚本的工业化不可知构建系统，可用于快速构建多个依赖项目，而不必依赖特定的 IDE 或构建工厂。它是不可知的，因为它不是基于单个构建引擎。我使用 cmake 创建了第一个版本
java - antlr4 语法适用于 Java 目标，但适用于 Python 目标
我最初使用 Java 目标开发了一个语法(用于 TestRig 支持)，然后将其移植到 Python(从 git hub 语法存储库扩展了 Python3 语法，因此需要将操作移植到 Python
ios - 仅在 xcode 中启动 iPhone 目标，而不启动 OSwatch 目标，当两者都存在于项目中时
我有一个以 iPhone 和 watchOS 为目标的 Xcode 项目。 iPhone 目标使用加速度计，模拟器不支持。我可以只启动 iPhone 应用程序而不启动 watch 目标吗？我从: Ca
windows - 删除 .eml 文件中的行并将新的 "files"(目标 A)复制到多个文件(目标 B)中
您好，我想创建一个批处理文件，用于在 .eml 文件(目标 A)中查找某些关键字，然后删除它们所在的行。之后，我需要批处理文件将"new"文件放入(目标 B)中的单独 .eml 文件中。文件也可以是
android - 无法将使用 JVM 目标 1.8 构建的字节码内联到使用 JVM 目标 1.6 构建的字节码
当尝试通过 IntelliJ 运行示例 CorDapp (GitHub CorDapp) 时，我收到以下错误: Cannot inline bytecode built with JVM target
gradle - Kotlin:无法将使用 JVM 目标 1.8 构建的字节码内联到使用 JVM 目标 1.6 的字节码中
我在尝试向我的 kotlin spring 项目添加一些依赖项时遇到问题。我使用 spring boot 初始化程序来运行一个基本项目。我的问题:如果我取消对 jackson 或 Koin 依赖项的
JavaScript 目标。
这是有问题的网站: http://www.onepixelroom.com/londonrefurb 当我点击关于部分后面的多个圆圈时，我希望它更改上面文本中的引号。到目前为止，我得到它来显示文本
jQuery:目标 $(this) 和一个元素
单击后，我将删除两个元素 $(this) 和 $("#foo")。目前我的代码如下所示: $(this).remove(); $("#foo").remove(); 如何在不重复自己的情况下优化它？
具有多个依赖项的 Makefile 目标
我有一个小脚本，可将 Markdown 文件编译为 html，并将其与一些样式表和 javascript 一起插入到模板的主体中。我有一个 GNU makefile 来完成这个: output.htm
C 目标 if 语句有问题
已关闭。此问题需要 debugging details 。目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and the
每个客户端的 IOS 目标
一些背景知识: 在android中我们开发了同样的应用，基本上我们先开发了Android应用，现在我们创建了它的IOS版本，所以这个应用有多个客户端。在 android 中，我们实际上是使用 Andr
javascript - knockout 目标
我想知道是否可以使用 knockout 来更改html中的目标() 我的所有其他信息都在 JavaScript 中，所以这对我来说是一个大问题。这是我的 JavaScript: var library
jquery - 目标::在jquery之前
这个问题在这里已经有了答案: Selecting and manipulating CSS pseudo-elements such as ::before and ::after using j
c++ - 如何遍历有向图中的所有边并获取源+目标
我在我的有向图中添加了一堆节点和顶点，使用设置 typedef boost::adjacency_list graph; 创建 Node有一个节点名称字符串，Edge它的分数有一个整数。我试图遍历所有
Android 目标 API
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。这个问题似乎与 help center 中定义的范围内的编程无关。 . 关闭 8 年前。 Improve
ios - 如何存储自定义对象数组(目标)
如何存储我在 NSUserDefaults 中创建的 Goal 类型的对象数组？ ( swift ) 代码如下: func saveGoalList ( newGoalList : [Goal] ){
TypeScript 目标 ES3
Array.prototype.indexOf 和 Date.now 已在 ES5 中引入。如果我编译存储在文件 test.ts 中的以下代码，为什么 Typescript 不能转译？ Date.no
C# 属性和属性位置/目标
我正在阅读有关属性的内容，并了解到可以使用您的代码将它们应用于不同的目标实体 -(请参阅 Attribute Targets)。因此，查看我项目中的 AssemblyInfo.cs 文件，我可以看到
makefile - 如何执行所有匹配通配符的 makefile 目标
给定一个 Makefile: all: build/a build/b build/c # need to change this to all: build/* build/a:
build - 仅针对一个框架的 MSBuild 目标
我有一个带有多框架目标的项目- netstandard2.0;net471 . 我想为 netframework 构建解决方案和 netstandard分别。目前我使用这个 MSBuild 命令:

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 从固定顶部导航栏偏移目标面板