Блог

Главная - Вопросы по программированию - Липкая панель навигации, прокрутка до первого элемента не точная

Липкая панель навигации, прокрутка до первого элемента не точная

#javascript #css #scroll #navbar

#javascript #css #прокрутка #панель навигации

Вопрос:

Я пытаюсь создать панель навигации, которая остается вверху после прокрутки до первого элемента (nav), например, «Новости». Он работает неточно, нажимая «новости». Он прокручивается сильно вниз, после повторного нажатия на «Новости» он снова прокручивается вверх до нужного положения. Любопытно, что это происходит только на первом элементе панели навигации. Как я могу это исправить?

 //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=jpgamp;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>

Комментарии:

1. Это потому, что вы меняете поведение своей панели навигации, чтобы она была статичной или липкой, то есть удаляете ее с высоты тела и вместо этого размещаете ее поверх элементов.

Ответ №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=jpgamp;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>

Комментарии:

1. Спасибо. Я попробую это 🙂

2. Хорошо! Надеюсь, это поможет

Ответ №2:

Когда вы преобразуете элемент с помощью position: fixed; , этот элемент перестает выполняться. Итак, вам нужно компенсировать недостаток высоты, который ваша панель навигации больше не занимает.

Комментарии:

1. Спасибо. Итак, должна быть возможность сделать это с помощью функции js, прежде чем перейти к целевой позиции, верно? Могу ли я поступить так: 1.) вырезать элемент 2.) заменить потерянный пробел 3.) прокрутить до позиции?

2. Да, вы можете сделать это с помощью своей функции JS. Но вам нужно иметь либо: — другой элемент, заменяющий вашу панель навигации с теми же размерами, — либо один существующий элемент рядом с вашей панелью навигации, который увеличивается на размер отсутствующей панели навигации