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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了具有引导程序的固定表头和分段锚点相关的知识,希望对你有一定的参考价值。

我发誓我已经尽力解决该问题。我有一个固定的引导导航栏,使用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链接,就可以给我这个信息:correct position

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

谢谢!

// 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 -->
答案

您遇到此问题的原因是// 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 -->。因此创造了空间。现在您可以进行相应的调整。

使用边距时,我会小心。仅在必要时使用它们。我很少使用它,仅用于细微的调整和响应。如果您的样式正确,则没有任何余量。我将研究使用<!-- 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>。当创建漂亮的功能布局时,这非常有用。对于新人来说,这也是一个很好的起点。您越早进入它,布局就越适合您。

[我还注意到您正在使用javascript添加在新页面中打开的外部链接。为此,更简单的方法是执行类似.section2的操作。这是参考,margin-top: 200px

至于您的导航栏已修复,这是您应该使用的一些代码,而不是现在使用的代码。

Flexbox

编辑一个:这是一种实现方法,就是添加一个空白<a href="someoutsidelink.com" target="_blank">标签。将其放在w3schools开头标签的顶部。然后添加 var elementPosition = $("#navbar").offset(); $(window).scroll(function() { if ($(window).scrollTop() > elementPosition.top) { $("#navbar") .css("position", "fixed") .css("top", "0"); } else { $("#navbar").css("position", "static"); } }); ,从而创建该空间。

另一答案

我找到了解决方案!我将ABOUT部分中的代码重构为: