粘性导航栏，滚动到第一个元素不精确

【问题标题】：Sticky Navbar, scroll to first element not precise粘性导航栏，滚动到第一个元素不精确
【发布时间】：2020-09-07 11:26:13
【问题描述】：

我正在尝试制作一个导航栏，它在滚动到第一个元素（导航）后会粘在顶部，例如'消息'。通过点击“新闻”，它的工作不精确。它向下滚动很多，再次点击“新闻”后，它再次向上滚动到正确的位置。奇怪的是它只发生在导航栏的第一个元素上。我该如何解决这个问题？

//Sticky-NavBar
window.onscroll = function() {stickyNavBar()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function stickyNavBar() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}
/*Base*/
.contentBody{
  background-color: white;
}

/*Sections*/
html {
  scroll-behavior: smooth;
}
#header{}
#news{}
#products{background-color: aqua;}
#services{}
#customers{}
#community{}
#contact{}
#about{}
#footer{}
/*Width Element*/
.fitWidth{
  width: -webkit-fill-available;
}
.width100{
  width: 100%;
}
.fitContBoxLeft{
  display: inline-block;
  float: left;
}
.fitContBoxRight{
  display: inline-block;
  float: right;
}
/**/


/*Borders*/
.roundedBorader{
  border-radius: 50%;
}
.roundedBox{
    border: 1px solid lightgrey;
    border-radius: 12px;
}
/*Div*/
.headingBox{
  position: relative
  background-color: lightgrey;
  height: 268;
}
.news{
  background-color: purple;
}
.products{
  background-color: white;
}
.services{
  background-color: limegreen;
}
.customers{
  background-color: blue;
}
.pBox1{
  float:left;
  width: 24.7%;
  margin: 1px;
  border-radius: 5px;
  text-align: center;
}
.headBottomLine{
  height: 12%;
  width: 100%;
  background-color: grey;
}
.leftBox50{
  height: auto;
  float: left;
  background-color: white;
  width: 49%;
  margin: 2px;
}
.rightBox50{
  height: auto;
  float: left;
  background-color: white;
  width: 49%;
  margin: 2px;
}
.bodyBox{
  height: 200px;
  background-color: grey;
}
.aboutUs{
  height: 200px;
  background-color: white;
}
.footerBox{
  min-height: 300px;
  background-color: black;
}

/*Backgrounds*/
.headBG{
  background-image: url("https://www.toptal.com/designers/subtlepatterns/patterns/double-bubble.png");
  background-size: cover;
}

/*Position*/
.bottom0{
  bottom: 0;
}
.posRel{
  position: relative;
}
.posAbs{
  position: absolute;
}

/*Float*/
.floatLeft{
  float: left;
}
.floatRight{
  float: right;
}

/*Alignment*/
.justiText{
  text-align: justify;
}
.rightText{
  text-align: right;
}
.leftText{
  text-align: left;
}
.centerText{
  text-align: center;
}
.alignBox{
  display: flex;
  justify-content: center;
}

/*Padding*/
.pAll-5{
  padding: 5%;
}
.pTop-8{
  padding-top: 8%;
}
.pTop-5{
  padding-top: 5%;
}
.pTop-2{
  padding-top: 2%;
}
.mTop-n3{
  margin-top: -3%;
}
.mTop-5{
  margin-top: auto;
}
.mTop-6{
  margin-top: 6%;
}
.pLine{
  width:100%;
}
.pLR{
  padding-left: 5%;
  padding-right: 5%;
}
.pBot-12{
  padding-bottom: 12%;
}
.pTop-10{
  padding-top: 10%;
}
.pTop-6{
    padding-top: 6%;
}
.pTop-1{
  padding-top: 2%;
}
.pLeft-30{
  padding-left: 30%;
}
.pLeft-25{
  padding-left: 25%;
}
.pLeft-20{
  padding-left: 20%;
}
.pLeft-10{
  padding-left: 10%;
}
.pLeft-5{
  padding-left: 5%;
}
.pRight-5{
  padding-right: 5%;
}
.pTop-4{
  padding-top: 4%;
}
.pAll-20{
  padding: 20px;
}
.pLTRB{
    padding-left: 15%;
    padding-top: 2%;
    padding-bottom: 5%;
}
.centerHeadLine{
    padding-bottom: 7%;
}

/*Colors*/
.white{
  color: white;
}
.black{
  color: black;
}
.grey{
  color: grey;
}
.lightgrey{
  color: lightgrey;
}
div.c{
  color: lightgrey;
}
div.b{
  color: white;
}
div.a{
  color: black;
}
.bgCol-black{
  background-color: black;
}
.bgCol-grey{
  background-color: grey;
}
.bgCol-purple{
  background-color: #8e42c7;
}
.bgCol-white{
  background-color: white;
}
.bgCol-lightgrey{
  background-color: lightgrey;
}
.bgCol-limegreen{
  background-color: limegreen;
}
.bgLightGreyX{
  background-color: #d5d2d670;
}

/*Filter styles*/
.saturate { filter: saturate(3); }
.grayscale { filter: grayscale(100%); }
.contrast { filter: contrast(160%); }
.brightness { filter: brightness(0.25); }
.blur { filter: blur(3px); }
.invert { filter: invert(100%); }
.sepia { filter: sepia(100%); }
.huerotate { filter: hue-rotate(180deg); }
.rss.opacity { filter: opacity(50%); }

/*Heading Colors*/
h1.a{
  color: white;
}
h1.b{
  color: black;
}
h5.a{
  color: white;
}
h4.b{
  color: black;
}
h4.a{
  color: white;
}
h5.b{
  color: black;
}

/*Body*/
body {
  margin: 0;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
}

/*NavBar*/
.navbar {
  overflow: hidden;
  background-color: #333;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/*Nav-Dropdown*/
.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: #ea8013;
}

.dropdown-content {
  display: none;
  position: fixed;
  background-color: #333;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #94a25c;
}

.dropdown:hover .dropdown-content {
  display: block;
}


/* The sticky class*/

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!---------------------------------------------------Header--------------------------------------------------->
<div class='headBG posRel' id='home'>
  <div class='pTop-4 pLeft-10'>
    <img class='floatLeft roundedBorader' src='https://pbs.twimg.com/media/EaZSuXXXkAAMtJ5?format=jpg&name=360x360' height="150" width="150"/>
    <div class='centerHeadLine pLeft-25'>
      <h1 class='b'>Welcome friends</h1>
      <h5 class='b'><u>The spot where we test some html, css and js</u></h5>
    </div>
  </div>
  <!--NAV-->
  <div class="navbar fitWidth" id="navbar">
      <a class="active" href="#home">Home</a>
      <a class="" href="#news">News</a>
      <a class="" href="#products">Products</a>
      <a class="" href="#services">Services</a>
      <a class="" href="#customers">Customers</a>
      <a class="" href="#community">Community</a>
      <a class="" href="#contact">Contact</a>
    <div class="dropdown">
      <button class="dropbtn">About 
        <i class="fa fa-caret-down"></i>
      </button>
      <div class="dropdown-content">
     <!-- //TODO: Modals als POP up einbauen, mit jeweiligen content -->
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div> 
  </div>
</div>
<!---------------------------------------------------Content-------------------------------------------------->
<div class='contentBody'>
  <!--News-->
   <div class='news' id="news">

      <h1 class='a centerText pTop-5 mTop-5'>News</h1>
      <h5 class='a centerText'>Stay tunned with our News</h5>

    <div class='alignBox'>
      <div class='leftBox50 alignBox roundedBox'> 
        <div class='centerText'>
          <h4>Lorem ipsum</h4>
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>        
        </div>
      </div>
      <div class='rightBox50 alignBox roundedBox'>
        <div class='centerText'>
          <h4>Lorem ipsum</h4>
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>        
        </div>        
      </div>  
   </div>
    <div class='alignBox pAll-20' id=''>
      <form action="/action_page.php">
        <label class='white' for="lname">Newsletter:</label>
        <input type="text" id="lname" name="lname">
        <input type="submit" value="Submit">
      </form>
    </div>
   </div>
  <!--//News-->
  
  <!--Products-->
  <div class='products' id='products'>
    <h1 class='centerText pTop-6 mTop-5'>Products</h1>
    <h5 class='b centerText'>Stay tunned with our products</h5>
    <div class='leftText pAll-20'>
        <h4>Lorem ipsum</h4>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
      </div>    
    <div class='pAll-20'>
      <div class='white pBox1 bgLightGreyX'>
        <img class='pTop-5' src='https://via.placeholder.com/150'/><br>
        <p>Product #1</p>
      </div>
      <div class='white pBox1 bgLightGreyX'>
        <img class='pTop-5' src='https://via.placeholder.com/150'/><br>
        <p>Product #2</p>
      </div>
      <div class='white pBox1 bgLightGreyX'>
        <img class='pTop-5' src='https://via.placeholder.com/150'/><br>
        <p>Product #3</p>
      </div>
      <div class='white pBox1 bgLightGreyX'>
        <img class='pTop-5' src='https://via.placeholder.com/150'/><br>
        <p class='black'>Product #4</p>
      </div>
     </div>
    <div class='pTop-10 pLR'>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus e</p>
    </div>
  </div>
  <!--//Products-->
  <!--Services-->
  <div class='services' id='services'>
    <h1 class='centerText pTop-5 mTop-5'>tile#1</h1>
    <h5 class='b centerText'>Stay tunned with our Services</h5>
    
    <div class='pLeft-5 fitContBoxLeft roundedBox'>
      <img class='floatLeft' src='https://via.placeholder.com/50'/><br>
      <div class='floatLeft pLeft-5'>tile#2</div>
    </div>
    
    <div class='pRight-5 fitContBoxRight roundedBox'>
      <img class='floatRight' src='https://via.placeholder.com/50'/><br>
      <div class='floatRight pRight-5'>tile#3</div>
    </div>
    
    <div class='pLeft-5 fitContBoxLeft roundedBox'>
      <img class='floatLeft' src='https://via.placeholder.com/50'/><br>
      <div class='floatLeft pLeft-5'>tile#4</div>
    </div>
    
    <div class='pRight-5 fitContBoxRight roundedBox'>
      <img class='floatRight' src='https://via.placeholder.com/50'/><br>
      <div class='floatRight pRight-5'>tile#5</div>
    </div>
    
    <h4 class='centerText pTop-5'>asdfadsf asdf  asdf asd f asdfvices</h4>
    <div class=''></div>
  </div>
  <!--//Services-->
  <!--Customers-->
  <div class='customers' id='customers'>
    <h1 class='a centerText'>Customers</h1>
    <div class=''></div>
    <div class=''></div>
    <p>jgfjhgfghjf</p>
  </div>
  <!--//Customers-->
  <!--Community-->
  <div class='' id='Community'>
    <h1 class='a centerText'>Community</h1>
    <div class=''></div>
    <div class=''></div>
  </div>
  <!--//Community-->
  <!--Contact-->
  <div class='' id='Contact'>
    <h1 class='a centerText'>Contact</h1>
    <div class=''></div>
    <div class=''></div>
  </div>
  <!--//Contact-->
  <!--About-->
  <div class='aboutUs'>
    <div></div>
  </div>
  <!--//About-->
</>
<!---------------------------------------------------Footer--------------------------------------------------->
<div class='footerBox'>
  <div></div>
</div>

【问题讨论】：

  • 这是因为您将导航栏的行为更改为静态或粘性，即将其从 body-height 移除，而是将其放置在项目之上。

标签： javascript css scroll navbar


【解决方案1】：

您需要将其更改为 JS/JQuery，在我的情况下为 JQuery。添加此脚本，您将拥有更多控制权，如果将, 0更改为毫秒，您将能够制作动画。请注意，我正在从容器位置中减去导航栏高度。

$(document).ready(function(){
  $("#navbar a").click(function(e) {
    e.preventDefault();
    $('html, body').animate({
      scrollTop: $($.attr(this, 'href')).offset().top - $("#navbar").height()
    }, 0);
  });
});


//Sticky-NavBar
window.onscroll = function() {stickyNavBar()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function stickyNavBar() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

$(document).ready(function(){
  $("#navbar a").click(function(e) {
    e.preventDefault();
    $('html, body').animate({
      scrollTop: $($.attr(this, 'href')).offset().top - $("#navbar").height()
    }, 0);
  });
});
/*Base*/
.contentBody{
  background-color: white;
}

/*Sections*/
html {
  scroll-behavior: smooth;
}
#header{}
#news{}
#products{background-color: aqua;}
#services{}
#customers{}
#community{}
#contact{}
#about{}
#footer{}
/*Width Element*/
.fitWidth{
  width: -webkit-fill-available;
}
.width100{
  width: 100%;
}
.fitContBoxLeft{
  display: inline-block;
  float: left;
}
.fitContBoxRight{
  display: inline-block;
  float: right;
}
/**/


/*Borders*/
.roundedBorader{
  border-radius: 50%;
}
.roundedBox{
    border: 1px solid lightgrey;
    border-radius: 12px;
}
/*Div*/
.headingBox{
  position: relative
  background-color: lightgrey;
  height: 268;
}
.news{
  background-color: purple;
}
.products{
  background-color: white;
}
.services{
  background-color: limegreen;
}
.customers{
  background-color: blue;
}
.pBox1{
  float:left;
  width: 24.7%;
  margin: 1px;
  border-radius: 5px;
  text-align: center;
}
.headBottomLine{
  height: 12%;
  width: 100%;
  background-color: grey;
}
.leftBox50{
  height: auto;
  float: left;
  background-color: white;
  width: 49%;
  margin: 2px;
}
.rightBox50{
  height: auto;
  float: left;
  background-color: white;
  width: 49%;
  margin: 2px;
}
.bodyBox{
  height: 200px;
  background-color: grey;
}
.aboutUs{
  height: 200px;
  background-color: white;
}
.footerBox{
  min-height: 300px;
  background-color: black;
}

/*Backgrounds*/
.headBG{
  background-image: url("https://www.toptal.com/designers/subtlepatterns/patterns/double-bubble.png");
  background-size: cover;
}

/*Position*/
.bottom0{
  bottom: 0;
}
.posRel{
  position: relative;
}
.posAbs{
  position: absolute;
}

/*Float*/
.floatLeft{
  float: left;
}
.floatRight{
  float: right;
}

/*Alignment*/
.justiText{
  text-align: justify;
}
.rightText{
  text-align: right;
}
.leftText{
  text-align: left;
}
.centerText{
  text-align: center;
}
.alignBox{
  display: flex;
  justify-content: center;
}

/*Padding*/
.pAll-5{
  padding: 5%;
}
.pTop-8{
  padding-top: 8%;
}
.pTop-5{
  padding-top: 5%;
}
.pTop-2{
  padding-top: 2%;
}
.mTop-n3{
  margin-top: -3%;
}
.mTop-5{
  margin-top: auto;
}
.mTop-6{
  margin-top: 6%;
}
.pLine{
  width:100%;
}
.pLR{
  padding-left: 5%;
  padding-right: 5%;
}
.pBot-12{
  padding-bottom: 12%;
}
.pTop-10{
  padding-top: 10%;
}
.pTop-6{
    padding-top: 6%;
}
.pTop-1{
  padding-top: 2%;
}
.pLeft-30{
  padding-left: 30%;
}
.pLeft-25{
  padding-left: 25%;
}
.pLeft-20{
  padding-left: 20%;
}
.pLeft-10{
  padding-left: 10%;
}
.pLeft-5{
  padding-left: 5%;
}
.pRight-5{
  padding-right: 5%;
}
.pTop-4{
  padding-top: 4%;
}
.pAll-20{
  padding: 20px;
}
.pLTRB{
    padding-left: 15%;
    padding-top: 2%;
    padding-bottom: 5%;
}
.centerHeadLine{
    padding-bottom: 7%;
}

/*Colors*/
.white{
  color: white;
}
.black{
  color: black;
}
.grey{
  color: grey;
}
.lightgrey{
  color: lightgrey;
}
div.c{
  color: lightgrey;
}
div.b{
  color: white;
}
div.a{
  color: black;
}
.bgCol-black{
  background-color: black;
}
.bgCol-grey{
  background-color: grey;
}
.bgCol-purple{
  background-color: #8e42c7;
}
.bgCol-white{
  background-color: white;
}
.bgCol-lightgrey{
  background-color: lightgrey;
}
.bgCol-limegreen{
  background-color: limegreen;
}
.bgLightGreyX{
  background-color: #d5d2d670;
}

/*Filter styles*/
.saturate { filter: saturate(3); }
.grayscale { filter: grayscale(100%); }
.contrast { filter: contrast(160%); }
.brightness { filter: brightness(0.25); }
.blur { filter: blur(3px); }
.invert { filter: invert(100%); }
.sepia { filter: sepia(100%); }
.huerotate { filter: hue-rotate(180deg); }
.rss.opacity { filter: opacity(50%); }

/*Heading Colors*/
h1.a{
  color: white;
}
h1.b{
  color: black;
}
h5.a{
  color: white;
}
h4.b{
  color: black;
}
h4.a{
  color: white;
}
h5.b{
  color: black;
}

/*Body*/
body {
  margin: 0;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
}

/*NavBar*/
.navbar {
  overflow: hidden;
  background-color: #333;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/*Nav-Dropdown*/
.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: #ea8013;
}

.dropdown-content {
  display: none;
  position: fixed;
  background-color: #333;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #94a25c;
}

.dropdown:hover .dropdown-content {
  display: block;
}


/* The sticky class*/

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!---------------------------------------------------Header--------------------------------------------------->
<div class='headBG posRel' id='home'>
  <div class='pTop-4 pLeft-10'>
    <img class='floatLeft roundedBorader' src='https://pbs.twimg.com/media/EaZSuXXXkAAMtJ5?format=jpg&name=360x360' height="150" width="150"/>
    <div class='centerHeadLine pLeft-25'>
      <h1 class='b'>Welcome friends</h1>
      <h5 class='b'><u>The spot where we test some html, css and js</u></h5>
    </div>
  </div>
  <!--NAV-->
  <div class="navbar fitWidth" id="navbar">
      <a class="active" href="#home">Home</a>
      <a class="" href="#news">News</a>
      <a class="" href="#products">Products</a>
      <a class="" href="#services">Services</a>
      <a class="" href="#customers">Customers</a>
      <a class="" href="#community">Community</a>
      <a class="" href="#contact">Contact</a>
    <div class="dropdown">
      <button class="dropbtn">About 
        <i class="fa fa-caret-down"></i>
      </button>
      <div class="dropdown-content">
     <!-- //TODO: Modals als POP up einbauen, mit jeweiligen content -->
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div> 
  </div>
</div>
<!---------------------------------------------------Content-------------------------------------------------->
<div class='contentBody'>
  <!--News-->
   <div class='news' id="news">

      <h1 class='a centerText pTop-5 mTop-5'>News</h1>
      <h5 class='a centerText'>Stay tunned with our News</h5>

    <div class='alignBox'>
      <div class='leftBox50 alignBox roundedBox'> 
        <div class='centerText'>
          <h4>Lorem ipsum</h4>
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>        
        </div>
      </div>
      <div class='rightBox50 alignBox roundedBox'>
        <div class='centerText'>
          <h4>Lorem ipsum</h4>
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>        
        </div>        
      </div>  
   </div>
    <div class='alignBox pAll-20' id=''>
      <form action="/action_page.php">
        <label class='white' for="lname">Newsletter:</label>
        <input type="text" id="lname" name="lname">
        <input type="submit" value="Submit">
      </form>
    </div>
   </div>
  <!--//News-->
  
  <!--Products-->
  <div class='products' id='products'>
    <h1 class='centerText pTop-6 mTop-5'>Products</h1>
    <h5 class='b centerText'>Stay tunned with our products</h5>
    <div class='leftText pAll-20'>
        <h4>Lorem ipsum</h4>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
      </div>    
    <div class='pAll-20'>
      <div class='white pBox1 bgLightGreyX'>
        <img class='pTop-5' src='https://via.placeholder.com/150'/><br>
        <p>Product #1</p>
      </div>
      <div class='white pBox1 bgLightGreyX'>
        <img class='pTop-5' src='https://via.placeholder.com/150'/><br>
        <p>Product #2</p>
      </div>
      <div class='white pBox1 bgLightGreyX'>
        <img class='pTop-5' src='https://via.placeholder.com/150'/><br>
        <p>Product #3</p>
      </div>
      <div class='white pBox1 bgLightGreyX'>
        <img class='pTop-5' src='https://via.placeholder.com/150'/><br>
        <p class='black'>Product #4</p>
      </div>
     </div>
    <div class='pTop-10 pLR'>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus e</p>
    </div>
  </div>
  <!--//Products-->
  <!--Services-->
  <div class='services' id='services'>
    <h1 class='centerText pTop-5 mTop-5'>tile#1</h1>
    <h5 class='b centerText'>Stay tunned with our Services</h5>
    
    <div class='pLeft-5 fitContBoxLeft roundedBox'>
      <img class='floatLeft' src='https://via.placeholder.com/50'/><br>
      <div class='floatLeft pLeft-5'>tile#2</div>
    </div>
    
    <div class='pRight-5 fitContBoxRight roundedBox'>
      <img class='floatRight' src='https://via.placeholder.com/50'/><br>
      <div class='floatRight pRight-5'>tile#3</div>
    </div>
    
    <div class='pLeft-5 fitContBoxLeft roundedBox'>
      <img class='floatLeft' src='https://via.placeholder.com/50'/><br>
      <div class='floatLeft pLeft-5'>tile#4</div>
    </div>
    
    <div class='pRight-5 fitContBoxRight roundedBox'>
      <img class='floatRight' src='https://via.placeholder.com/50'/><br>
      <div class='floatRight pRight-5'>tile#5</div>
    </div>
    
    <h4 class='centerText pTop-5'>asdfadsf asdf  asdf asd f asdfvices</h4>
    <div class=''></div>
  </div>
  <!--//Services-->
  <!--Customers-->
  <div class='customers' id='customers'>
    <h1 class='a centerText'>Customers</h1>
    <div class=''></div>
    <div class=''></div>
    <p>jgfjhgfghjf</p>
  </div>
  <!--//Customers-->
  <!--Community-->
  <div class='' id='Community'>
    <h1 class='a centerText'>Community</h1>
    <div class=''></div>
    <div class=''></div>
  </div>
  <!--//Community-->
  <!--Contact-->
  <div class='' id='Contact'>
    <h1 class='a centerText'>Contact</h1>
    <div class=''></div>
    <div class=''></div>
  </div>
  <!--//Contact-->
  <!--About-->
  <div class='aboutUs'>
    <div></div>
  </div>
  <!--//About-->
</>
<!---------------------------------------------------Footer--------------------------------------------------->
<div class='footerBox'>
  <div></div>
</div>

【讨论】：

  • 谢谢。我会试试这个:)
  • 好的！希望对你有帮助
【解决方案2】：

当您使用position: fixed; 转换元素时，该元素将停止发生。因此，您需要补偿导航栏不再占用的高度不足。

【讨论】：

  • 谢谢。所以在导航到目标位置之前一定可以用js函数做到这一点，对吧？我可以这样：1.）剪切元素 2.）替换丢失的空间 3.）滚动到位置？
  • 是的，你可以用你的 JS 函数来做。但是您需要： - 另一个元素用相同的尺寸替换您的导航栏 - 或者您的导航栏附近的一个现有元素会随着缺少的导航栏的大小而增长
猜你喜欢
  • 2019-03-08
  • 2019-05-16
  • 2015-05-06
  • 1970-01-01
  • 1970-01-01
  • 2016-10-17
  • 1970-01-01
  • 1970-01-01
  • 2021-08-16
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode