Rand Offset Sticky Header scrollen Problem

Question

so habe ich eine klebrige Header auf einer Website-Projekt, das einzelne Seitenlayout wie erwartet verwendet. Nur weil mein Header wegen des Logos ziemlich groß ist, deckt er jedes Mal, wenn ich scrolle, die Header jeder Sektion ab. Ich frage mich, ob es eine Möglichkeit ist, den Rand auszugleichen, wenn ein Link auf scroll mit wie margin-top: 150px; Ich habe auch einen Inhalt, der die absolute Position verwendet, und ich möchte einen anderen Selektor angeben, der nur für einen bestimmten Seitenabschnitt mit einem festgelegten Bildlauf scrollt. Ich hoffe, das macht Sinn, ich will einen Teil des HTML und jQuery-Code schreiben, die ich bisher habe:

HTML:

<header> 
      <div class="container-fluid example5"> 
       <nav class="navbar navbar-default navigation1"> 
        <div class="container-fluid"> 
         <div class="navbar-header page-scroll"> 
          <button type="button" id="nav-toggle" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar5"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> 
          <a class="navbar-brand scroll-top" href="index.html"><img class="img-responsive" src="img/Logo3.png" alt="Cleaning Services Logo"></a> 
         </div> 
         <div id="navbar5" class="navbar-collapse collapse"> 
          <ul class="nav navbar-nav navbar-right"> 
           <li class="active"><a class="scroll-link" data-id="home" href="#carousel-example">HOME</a></li> 
           <li><a href="#about" class="scroll-link" data-id="about">ABOUT</a></li> 
           <li><a href=".services" class="scroll-link" data-id="services">SERVICES</a></li> 
           <li><a class="red scroll-link" data-id="hot-offers" href=".hot-offers">HOT OFFERS</a></li> 
           <li><a href=".testimonials" class="scroll-link" data-id="testimonials">TESTIMONIALS</a></li> 
           <li><a href=".contact-us" class="scroll-link" data-id="contact">CONTACT</a></li> 
          </ul> 
         </div> 
         <!--/.nav-collapse --> 
        </div> 
        <!--/.container-fluid --> 
       </nav> 
      </div> 
     </header> 
<!-- content --> 
<div id="#carousel-example" class="page-section"> 
<h1>Header</h1> 
<p>CONTENT....</p> 
</div> 
<div id="about" class="page-section"><h2>Header</h2> 
<p>CONTENT....</p></div> 
<div id=".services" class="page-section"><h3>Header</h3> 
<p>CONTENT....</p></div> 

jQuery:

$('a').click(function (e) { 
       e.preventDefault(); 

       var curLink = $(this); 
       var scrollPoint = $(curLink.attr('href')).position().top; 
       $('body,html').animate({ 
        scrollTop: scrollPoint 
       }, 500); 
      }) 
      $(window).scroll(function() { 
       onScrollHandle(); 
      }); 

      function onScrollHandle() { 
       //Navbar shrink when scroll down 
       $(".navbar-default").toggleClass("navbar-shrink", $(this).scrollTop() > 50); 
       //Get current scroll position 
       var currentScrollPos = $(document).scrollTop(); 
       //Iterate through all node 
       $('#navbar5 > ul > li > a').each(function() { 
        var curLink = $(this); 
        var refElem = $(curLink.attr('href')); 
        //Compare the value of current position and the every section position in each scroll 
        if (refElem.position().top <= currentScrollPos && refElem.position().top + refElem.height() > currentScrollPos) { 
         //Remove class active in all nav 
         $('#navbar5 > ul > li').removeClass("active"); 
         //Add class active 
         curLink.parent().addClass("active"); 
        } 
        else { 
         curLink.parent().removeClass("active"); 
        } 
       }); 
      } 

Answer 1

coudn't verstehen, was genau wollen Sie, aber für einen Anfang lassen Sie uns versuchen, Ihren Code funktioniert zuerst, ich entfernte die scrollHandle() Funktion, und korrigiert Ihre html, jetzt versuchen, mir zu erklären, was Sie wollen, und ich werde meine Antwort bearbeiten.

$('a').click(function (e) { 
 
       e.preventDefault(); 
 

 
       var curLink = $(this); 
 
       var scrollPoint = $(curLink.attr('href')).position().top; 
 
       $('body,html').animate({ 
 
        scrollTop: scrollPoint 
 
       }, 500); 
 
      }); 
 
     

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<header> 
 
      <div class="container-fluid example5"> 
 
       <nav class="navbar navbar-default navigation1"> 
 
        <div class="container-fluid"> 
 
         <div class="navbar-header page-scroll"> 
 
          <button type="button" id="nav-toggle" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar5"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> 
 
          <a class="navbar-brand scroll-top" href="index.html"><img class="img-responsive" src="img/Logo3.png" alt="Cleaning Services Logo"></a> 
 
         </div> 
 
         <div id="navbar5" class="navbar-collapse collapse"> 
 
          <ul class="nav navbar-nav navbar-right"> 
 
           <li class="active"><a class="scroll-link" data-id="home" href="#carousel-example">HOME</a></li> 
 
           <li><a href="#about" class="scroll-link" data-id="about">ABOUT</a></li> 
 
           <li><a href="#services" class="scroll-link" data-id="services">SERVICES</a></li> 
 
           <li><a class="red scroll-link" data-id="hot-offers" href="#hot-offers">HOT OFFERS</a></li> 
 
           <li><a href="#testimonials" class="scroll-link" data-id="testimonials">TESTIMONIALS</a></li> 
 
           <li><a href="#contact-us" class="scroll-link" data-id="contact">CONTACT</a></li> 
 
          </ul> 
 
         </div> 
 
         <!--/.nav-collapse --> 
 
        </div> 
 
        <!--/.container-fluid --> 
 
       </nav> 
 
      </div> 
 
     </header> 
 
<!-- content --> 
 

 
<div id="about" class="page-section"><h2>about</h2> 
 
<p>CONTENT....</p></div> 
 
<div id="services" class="page-section"><h3>services</h3> 
 
<p>CONTENT....</p></div> 
 
<div id="hot-offers" class="page-section"><h3>Hot Offers</h3> 
 
<p>CONTENT....</p></div> 
 
<div id="testimonials" class="page-section"><h3>testimonials</h3> 
 
<p>CONTENT....</p></div> 
 
<div id="contact-us" class="page-section"><h3>Contact US</h3> 
 
<p>CONTENT....</p></div> 
 
<div style="height:300px"/>