`position: fixed`或`sticky`在版式中

Question

我有一个由几个图像组成的便餐。我希望这些图像是指向同一页面上各个部分的链接-锚链接。但是，我似乎无法正常工作。

这是我的HTML：

<div id="nav2"><a href="#powerlifting"><img src="img/icon1.png" alt=""></a></div>

<a name="powerlifting"></a>
<div id="powerlifting">
    <div class="header1"><h1>POWERLIFTING</h1></div>
</div>

这是＃nav2上的样式：

#nav2 {
    position: fixed;
    top: 14.285vh;
    cursor: pointer;
}

提前谢谢！：-）

Answer 1

上面的代码似乎正在工作。 href中#powerlifting的锚标记实际上确实跳到了div#powerlifting。您可能没有看到它，因为您的div可能不够高。

但是，如果希望它随动画一起向下滚动，则需要使用JS或CSS。

这可能是一个相关的答案：Scrolling to an Anchor using Transition/CSS3。随附的JS Fiddle（来自相关答案）可能对您有所帮助：http://jsfiddle.net/YYPKM/3/

Answer 2

`position: fixed`或`sticky`在版式中

您的layout for an image and link正常出现并且在正常情况下，您应该没有问题。因此，我们可以假设是围绕固定导航栏设计的周围布局削弱了跳转到<a>锚的标准行为。我没有等待更多的代码（这没有犯错，这可能真是一团糟），我制作了一个功能完备的HTML / CSS解决方案，以解决简单锚点可能出现的问题。

演示

查看此索引时，单击“整页”链接。在具有非标准尺寸的框架中看起来不太好，因为演示的大部分长度与视口有关。

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Rye" rel="stylesheet">
  <style>
    /* Basic reset */
    
    * {
      margin: 0;
      padding: 0;
    }
    /* vh and vw units will be used throughout this demo */
    
    html,
    body {
      width: 100vw;
      height: 100vh;
      font: 400 oblique 6vh/1.45 Times;
      overflow: hidden;
    }
    /* Animates scrolling */
    
    body {
      margin: 0 auto;
      overflow-y: scroll;
      scroll-behavior: smooth;
    }
    
    h1 {
      font: 700 small-caps 2rem Rye;
      margin: 0.67em 0 0.67em 5vw;
    }
    
    h2 {
      font: 700 small-caps 1.5rem Rye;
      margin: 0.83em 0;
    }
    
    h3 {
      font: small-caps 1.25rem Rye;
      margin: 1em 0;
    }
    /* Make sure to set z-index to an integer */
    
    nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1;
      border-bottom: 2px ridge #000;
      height: 10vh;
      min-height: 50px;
      width: 100%;
      background: #ddd;
    }
    
    nav a {
      text-decoration: none;
      font-style: normal;
      max-height: 10vh;
      min-height: 50px;
      line-height: 16vh;
      vertical-align: top;
    }
    
    a img {
      height: 10vh;
      max-height: 10vh;
      min-height: 50px;
    }
    
    main {
      margin: 0 auto;
    }
    
    section {
      margin: 0 auto;
      padding: 0 5vw;
    }
    
    article {
      margin: 1rem auto 0;
    }
    
    p {
      margin: 1em 0;
    }
    /*
    Compensates for the fixed navbar height offset when jumping 
    to an anchor. https://stackoverflow.com/a/28824157/2813224
    */
    
     :target::before {
      content: "";
      display: block;
      height: 5vh;
      margin-top: -5vh;
    }
    
    .banner-logo {
      text-align: right;
      height: 70vh;
      margin-bottom: 15vh;
    }
    
    .banner-logo img {
      height: 100%;
      width: auto;
    }
  </style>
</head>

<body>
  <nav>
    <a href="#main">
      <img src="http://alexandre.roulois.fr/data/dev/rkl/icon.png" alt=""> Home
    </a>

    <a href="#sec1">
      <img src="https://img2.apk.tools/150/2/0/9/com.tao101.chucknoris.chucknorrisjokes.png" alt=""> Section 1
    </a>

    <a href="#sec2">
      <img src="https://img2.apk.tools/150/2/0/9/com.tao101.chucknoris.chucknorrisjokes.png" alt=""> Section 2
    </a>
  </nav>

  <main>
    <a id='main'>&nbsp;</a>
    <header>
      <h1>All Things Chuck</h1>
      <figure class='banner-logo'>
        <img src='https://webiconspng.com/wp-content/uploads/2017/09/Chuck-Norris-PNG-Image-50835.png'>
      </figure>
    </header>

    <section>
      <a id='sec1'>&nbsp;</a>
      <header>
        <h2>Section 1</h2>
      </header>

      <p>Chuck Norris doesn't churn butter. He roundhouse kicks the cows and the butter comes straight out Chuck Norris doesn't wash his clothes, he disembowels them, Chuck Norris doesn't wear a watch. HE decides what time it is.</p>

      <article>
        <h3>Article 1</h3>
        <p>Chuck Norris will attain statehood in 2009. His state flower will be the Magnolia, Chuck Norris doesn't wear a watch. HE decides what time it is Contrary to popular belief, America is not a democracy, it is a Chucktatorship, Chuck Norris' hand
          is the only hand that can beat a Royal Flush Chuck Norris originally appeared in the "Street Fighter II" video game, but was removed by Beta Testers because every button caused him to do a roundhouse kick. When asked bout this "glitch," Norris
          replied, "That's no glitch." When Chuck Norris roundhouse kicks you and misses it kills 75% of the population that was standing in the direct line of Chuck, But Chuck never misses The leading causes of death in the United States are: 1. Heart
          Disease 2. Chuck Norris 3. Cancer. Outer space exists because it's afraid to be on the same planet with Chuck Norris Chuck Norris is ten feet tall, weighs two-tons, breathes fire, and could eat a hammer and take a shotgun blast standing.</p>
        <p>Chuck Norris is the only man to ever defeat a brick wall in a game of tennis. When the Boogeyman goes to sleep every night, he checks his closet for Chuck Norris.</p>
      </article>

      <article>
        <h3>Article 2</h3>
        <p>Most people have 23 pairs of chromosomes. Chuck Norris has 72... and they're all poisonous. There is no theory of evolution. Just a list of creatures Chuck Norris has allowed to live. Chuck Norris likes children...they taste like chicken, Chuck
          Norris doesn't churn butter. He roundhouse kicks the cows and the butter comes straight out, After discovering the secrets to time travel, Chuck Norris secretly replaced each player on the 1972 Dolphins team, thus making them undefeated. Chuck
          Norris doesn't dress up for Halloween, he's scary enough Chuck Norris figured out the secret of the universe. He just never told anyone, When Chuck Norris does a pushup, he isn't lifting himself up, he's pushing the Earth down Chuck Norris does
          not get frostbite. Chuck Norris bites frost, Contrary to popular belief, there is one thing faster then the speed of light, Chuck Norris' foot Chuck Norris once roundhouse kicked someone so hard that his foot broke the speed of light, went back
          in time, and killed Amelia Earhart while she was flying over the Pacific Ocean.</p>
      </article>
    </section>

    <section>
      <a id='sec2'>&nbsp;</a>
      <header>
        <h2>Section 2</h2>
      </header>

      <article>
        <p>Outer space exists because it's afraid to be on the same planet with Chuck Norris, There is no theory of evolution. Just a list of animals Chuck Norris allows to live. For every action, there is an unequal and opposite reaction from Chuck Norris
          that kills you, Crop circles are Chuck Norris' way of telling the world that sometimes corn needs to lie down. Chuck Norris is currently suing NBC, claiming Law and Order are trademarked names for his left and right legs Chuck Norris is the
          reason why Waldo is hiding</p>
      </article>

    </section>
  </main>
</body>

</html>

Answer 3

我已经找到问题的答案！向＃nav1添加z-index值似乎可以解决问题

#nav2 {
    position: fixed;
    top: 14.285vh;
    cursor: pointer;
    z-index: 9999;
}

使用图像作为可点击的锚链接

3 个答案:

`position: fixed`或`sticky`在版式中

演示

使用图像作为可点击的锚链接

3 个答案:

position: fixed或sticky在版式中

演示

`position: fixed`或`sticky`在版式中