Question

我试图实施此解决方案fixed anchors并且无法使其成功运行。这是我到目前为止所拥有的。此外，对于position：fixed，当链接位于右侧时，链接显示在左侧。

＆＃13;

.header{
  height:20px;
}

.right{
  float:right;
}

#section1{   
  background-color:blue;
  color:white;
}
#section2{  
  background-color:green;
  color:white;
}
#section3{  
  background-color:purple;
  color:white;
}
.size{
  float:left;
  width:100%;
  height:700px;
}

.anchor{
  display: block;
  height: 20px; /*same height as header*/
  margin-top: -20px; /*same height as header*/ 
  visibility: hidden;
}

＆＃13;

<div class='header' style="position: fixed; top: 0;">
   <div class='right' >
     <a  href ='#home'>home</a>
     <a  href ='#about'>about</a>
     <a  href ='#contact'>contact</a>
   </div> 
</div>


<span class='anchor' id='home'></span>
    <div id='section1' class='size'>home
    </div> 
<span class='anchor' id='about'></span>
    <div id='section2' class='size'>about
    </div>
<span class='anchor' id='contact'></span>
    <div id='section3' class='size'>contact
    </div>

＆＃13;

Answer 1

你的问题出现在size类的float中，float是一个非常复杂的参数，它会破坏html中的很多功能，避免使用它。

    .size{                                                                                                                                                   
      //float:left; remove him
      width:100%;
      height:700px;
    }

PS：你可以做到：两者兼顾;在大小的最后尝试将所有内容绑定在一起（这将是一个糟糕的设计），但我强烈建议你不要在这种情况下使用float。

给你一个例子：

<style>
html,body {
    height: 100%;
}
nav{
    height:20px;
    position: absolute;
    top: 0;
    background: white;
    width: 100%;
    z-index: 999;
}

#section1{
background-color:blue;
color:white;
}
#section2{
background-color:green;
color:white;
}
#section3{
background-color:purple;
color:white;
}
.size{
width:100%;
height:700px;
}

.anchor{
display: block;
height: 20px; /*same height as header*/
margin-top: -20px; /*same height as header*/
visibility: hidden;
}
</style>
<!-- language: lang-html -->

<nav>
    <a  href ='#home'>home</a>
    <a  href ='#about'>about</a>
    <a  href ='#contact'>contact</a>
</nav>


<span class='anchor' id='home'></span>
<div id='section1' class='size'>home
</div>
<span class='anchor' id='about'></span>
<div id='section2' class='size'>about
</div>
<span class='anchor' id='contact'></span>
<div id='section3' class='size'>contact
</div>

<!-- end snippet -->

查看我的CodePen

Answer 2

你在这里混合方法。我会将样式分成一个地方而不是一些内联 - 有些在CSS中，有些则作为辅助类，如.right。您的范围标记为inline - 并且内容中不能包含block个内容 - 在这种情况下，您的a标记也应为block ...希望，我的示例将显示编写标记和CSS的流畅方式。 - 通常 - 如果你要认真对待锚链接...你最终会使用JavaScript来计算标题高度 - 并在主体上添加填充，以便它可以位于顶部/不覆盖内容+还可以帮助对齐每个设置的锚点链接的偏移量，以确保根据屏幕大小的不同，填充在视觉上令人愉悦。

https://jsfiddle.net/sheriffderek/sw5sLker/

标记

<header class='site-header'>

  <nav class='main-navigation'>
    <ul class='item-list'>
      <li class="item">
        <a class='link' href="#one">one</a>
      </li>

      <li class="item">
        <a class='link' href="#two">two</a>
      </li>

       <li class="item">
        <a class='link' href="#three">three</a>
      </li>
    </ul>
  </nav>

</header>


<section class='section one' id='one'>
  <h1>Section one</h1>
</section>

<section class='section two' id='two'>
  <h1>Section two</h1>
</section>

<section class='section three' id='three'>
  <h1>Section three</h1>
</section>

样式

body {
  margin: 0; /* reset */
  padding-top: 50px; 
  /* the size of the header... */
  /* usually done with JavaScript */
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
} /* reset */

a {
  text-decoration: none;
  color: inherit;
} /* reset */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: black;
  color: white;
}

.main-navigation .item-list {
  /* you could use flexbox - or inline-block+text-align - or floats */
  /*  if you use floats - put an overflow hidden here - and floats on the .item */
  /* shown in fiddle */
}

.main-navigation .item {
  display: inline-block;
}

.main-navigation .link {
  display: block; /* give these shape for fingers */
  padding: 1rem;
}

.section {
  min-height: 300px;
  color: black; /* 'all sections' */
  padding: 40px 10px; /* JS may be used here to determine offset */
}

.section.one, .section.three {
  background: lightgray; /* specific named areas */
}

这里有一些示例JS和另一个小提琴，用于娱乐。

// query for and cache elements you'll need
var $page = $('html, body');
var $body = $('body');
var headerHeight = $('.site-header').outerHeight();
var $navLink = $('.main-navigation').find('.link');

// some settings for you to change
var scrollSpeed = 500; // in miliseconds... set to 0 if you don't want a visible animation

// add the padding for the body based on the header height
$body.css('padding-top', headerHeight);

// add a click event listener
$navLink.on('click', function() {
    var href = $.attr(this, 'href');
    var anchorPosition = $(href).offset().top;
    var offsetAnchorPosition = anchorPosition - headerHeight;

    $page.animate({
        scrollTop:  offsetAnchorPosition
    }, scrollSpeed, function() {
        window.location.hash = href;
    });

    return false;
});

https://jsfiddle.net/sheriffderek/c7xvpch8/或https://codepen.io/sheriffderek/pen/zwbYPO/

无法获得固定的锚点工作

2 个答案: