2017-03-24 113 views
0

因此,我在使用單頁面佈局的網站項目上有一個粘性標題。僅僅因爲我的標題由於徽標而非常大,所以每當我滾動它時都會覆蓋每個部分的標題。我想知道是否一個方法來抵消保證金每當一個鏈接被點擊滾動像邊距頂:150px ;.我也有一個使用絕對位置的內容,並且我想指定另一個選擇器,它只在特定的頁面部分上固定滾動。我希望是有道理的,我會後的HTML和jQuery代碼的一部分,我到目前爲止有:保證金抵消粘性標題滾動問題

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"); 
        } 
       }); 
      } 
+1

編輯你的問題,你的代碼添加到「片段」,解釋造成什麼你說的是喜歡中國,我(對不起亞洲人沒有個人) – MoolsBytheway

+0

當我點擊鏈接它春聯到頁面部分,因爲它應該,我只需要當我點擊它在頁面部分再次滾動,但與margin-top的偏移量:100px;所以標題可以看到。現在有道理嗎? –

+0

完成了! – MoolsBytheway

回答

0

Coudn't明白正是你想要的,但對於一個初學者,讓我們試着讓你的代碼優先, 我刪除了scrollHandle()函數,並更正了你的html, 現在試着向我解釋你想要什麼,我將編輯我的答案。

$('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"/>