具有引导程序的固定表头和分段锚点

Question

我发誓我已经尽力解决该问题。我有一个固定的引导导航栏，使用javascript onscroll事件监听器来应用固定的属性...我尝试在标记中使用样式，但效果不理想。因此，这当然是一个重复性的问题，但是我尝试了所有建议，然后尝试了一些建议。至少我能找到的。问题是，当我使用任何#about内部链接时，内容都位于导航栏下方。我在.section2上尝试了绝对，相对，顶部-... px的边距。没有一个起作用。

而且，我对此并不陌生，因此，任何解决方案，请使其针对我的代码，而不仅仅是在锚点上添加位置。给我确切的类/ ID，以及要添加或删除的内容，或两者都给我。这是实时页面的链接，以查看单击#about部分的任何链接时会发生什么：portfolio #about

https://kingdomb.github.io/live_portfolio/#about

注意：下面的代码无法正确显示错误，因此请使用上面的链接。

更新：3/22 02:16我设法找到了：

Come on guys!

这有一个非常简单的解决方案，像这样创建您的锚：

<div style="margin: -50px 0px 50px 0px; position: absolute;">
<a id="myanchor"></a>
</div>

[-50px的边距是我在div上方，而50px的边距是我下一个内容。您只需使用自定义边距进行测试。

像魅力一样运作。我在所有一页设计网站上都使用了这个技巧。

但是，现在在导航栏中单击关于#myanchor的About链接，就可以给我这个信息：

并且如果我单击完全相同的导航栏链接，我将对此进行较小的调整：

谢谢！



// When the user scrolls the page, execute myFunction
window.onscroll = function() {
  myFunction();
  myFunction2();
};

// Get the navbar
var navbar = document.getElementById("navbar");

// Get the offset position of the navbar
var sticky = navbar.offsetTop;

// Add the sticky class to the navbar when you reach its scroll 
position. Remove "sticky" when you leave the scroll position
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky");
  } else {
    navbar.classList.remove("sticky");
  }
}

// Get the logo
var logo = document.getElementById("logo");

// Get the offset position of the logo
var logoSpin = logo.offsetTop;

// Add the logo-spin class to the navbar when you reach its scroll 
position. Remove "logo-spin" when you leave the scroll position
function myFunction2() {
  if (window.pageYOffset >= logoSpin) {
    logo.classList.add("logo-spin");
  } else {
    logo.classList.remove("logo-spin");
  }
}

// All links will have a target:__blank for external page linking
// Read more: https://html.com/attributes/a-target/#ixzz6GMsDfQEr
// jQuery(document.links)
//   .filter(function() {
//     return this.hostname != window.location.hostname;
//   })
//   .attr("target", "_blank");

//OR Read more: https://html.com/attributes/a-target/#ixzz6GN6pd1Qt
function externalLinks() {
  for (var c = document.getElementsByTagName("a"), a = 0; a < 
c.length; a++) {
    var b = c[a];
    b.getAttribute("href") &&
      b.hostname !== location.hostname &&
      (b.target = "_blank");
  }
}
externalLinks();
<!-- begin snippet: js hide: false console: true babel: false -->




<!-- language: lang-html -->

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

<head>

</head>

<body>





<!-- HOME -->
<section id="home" class="section1">
  <div class='container'>
    <div class="row justify-content-center">
      <div class="col-md-12 col-sm-12">
        <p class='intro'>
          Hello, my name is <span class="highlight animated fadeIn" 
style="animation-delay:             1s; animation-duration: 
1.8s">King</span>.
          <br>
          <div class="intro animated fadeInLeft" style="animation- 
delay: 3s; animation-                 duration: 2s">And I'm a full- 
   stack web developer.</div>
          <a href="#myanchor"><button type="button" class="home-btn 
btn btn-primary-outline                btn-xs animated fadeIn"
             style="animation-delay: 5s; animation-duration: 
2s">VIEW MY WORK</button></a>
        </p>
      </div>
    </div>
  </div>
</section>

<!-- NAVIGATION -->
<div id="navbar">
  <nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <div class="container">
      <div class="logo-wrapper nav-item active">
        <div class="logo" id="logo">
          <a class="navbar-brand" href="#home"><img 
src="favicon.ico" alt="King's Brand                 Logo"></a>
        </div>
        <span class="brand" id="brand" style="animation-delay: 0s; 
animation-duration:                 3s">KING MAJOR</span>
      </div>
      <button class="navbar-toggler" type="button" data- 
toggle="collapse" data-                      
target="#navbarResponsive" aria-controls="navbarResponsive" 
       aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="#myanchor">ABOUT
                <span class="sr-only">(current)</span>
              </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#skills">SKILLS
                <span class="sr-only">(current)</span>
              </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#projects">PROJECTS
                <span class="sr-only">(current)</span>
              </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#contact">CONTACT
                <span class="sr-only">(current)</span>
              </a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

</div>

<!-- ABOUT -->
<div class="blank" style="margin: -65px 0px 200px 0px; position: 
absolute;">
  <a id="myanchor"></a>
</div>
<section id="about" class="section2">
  <div class="row-fluid">
    <div class="row">
      <div class="card ">
        <div class="card-block">
          <div class="card-title">
            <h1>Welcome, <a href="#">let's talk!</a></h1>
          </div>
          <div id="container">
            <p> I started independent web development two years ago, 
and haven't looked back.             A couple of things I love about 
coding are those moments when tough projects are               
complete, or discovering a solution to a difficult problem. Take a 
look at my
              <a href="#skills">skills</a>, and some of my recent 
              <a href="#projects">projects</a>. THANKS!
            </p>
            <a href="General_Resume.pdf" class="btn btn-outline- 
    primary" target="__blank">Print My Resume
            </a>
            
          </div>
        </div>
      </div>
    </div>
  </div>
</section>




  </body>
  </html>

<!-- end snippet -->

Answer 1

另一答案