2013-03-05 23 views
3

好的。這是我第一次使用引導滾動間諜,所以我不知道如果我做錯了什麼。 (很明顯,我是)這是問題。 我不得不使用-190的偏移量,因此紅色導航欄的底部位於該部分的起始位置。一旦我應用了偏移量,它不會突出顯示(主動地圖)主導航欄上的該部分。直到我向下滾動之前,它重點介紹該部分。引導卷軸間諜不高亮正確的部分

此外,我似乎沒有找到一種方法來附加鏈接去一路了。因爲它必須追隨主導航。我在哪裏放置#家庭ID?


下面是代碼:請注意,我不是複製整個HTML,因爲它真的很長,但我還附上了活鏈接。

<header id="global-header"> 
     <div class="header-cont-info"> Call to schedule your <span class="yellow uppercase">free,</span> no obligation assessment: <span class="yellow">407&#8211;844&#8211;1182 </span></div> 
     <!-- Main nav--> 
     <nav id="navbar"> 
      <h1 class="visuallyhidden">Main navigation</h1> 
      <ul class="nav"> 
      <li class="home-mn-btn active"><a href="#home">Home</a></li> 
      <li class="services-mn-btn"><a href="#services">Services</a></li> 
      <li class="reviews-mn-btn"><a href="#reviews-section">Reviews</a></li> 
      <li class="tp-logo"><img src="img/tidy-pools-logo.png" width="332" height="194" alt="Tidy Pools Logo"></li> 
      <li class="faq-mn-btn"><a href="#faq">Faq</a></li> 
      <li class="contact-mn-btnn"><a href="#contact-section">Contact</a></li> 
      <li class="portal-mn-btn"><a href="#">Customer Portal</a></li> 
      </ul> 
     </nav><!-- Main nav ends--> 
     </header> 

<!-- Services section--> 
     <div class="section-dividers-dark"><!--It contains the bottom shadow--> 
      <section id="services"><!--Ribbon ends--> 
      <p><a href="#" class="buttons yellow-buttons fancybox"><span class="modern-pictogram">W</span> View Pictures of Our Work</a></p> 
      <div class="clear-fix"></div> 
      <!-- Residential Pool and Spa Maintenance section--> 
      <section> 
       <header> 
       <h2>Residential Pool and Spa Maintenance</h2> 
       <p>Enjoy comprehensive weekly service for only $80/month, including:</p> 
       </header> 
       <ol> 
       <li><h3>Cleaning And Debris Removal</h3> 
        <ul> 
        <li> Skim surface and bottom of pool</li> 
        <li>Brush interior surfaces and steps</li> 
        <li>Clean tile</li> 
        <li>Vacuum and clean deck as necessary</li> 
        </ul> 
       </li> 
       <li><h3>Water Quality Assurance</h3> 
        <ul> 
        <li>Test water and balance</li> 
        <li>Add necessary chemicals</li> 
        </ul> 
       </li> 
       <li><h3>Equipment Maintenance</h3> 
        <ul> 
        <li>Empty baskets</li> 
        <li>Clean filter</li> 
        <li>Check equipment functioning</li> 
        </ul> 
       </li> 
       </ol> 
      </section><!-- Residential Pool and Spa Maintenance section ends--><br> 
      <!-- Commercial Pool Maintenance section--> 
      <section> 
       <h2>Commercial Pool Maintenance</h2> 
       <p>We offer affordable commercial service as well.<br> 
       Simply call and we’ll be happy to provide you<br> 
       with a customized quote for your property’s needs.</p> 
      </section><!-- Commercial Pool Maintenance section ends--> 
      <!-- Water Recovery Services section--> 
      <section> 
       <h2>Water Recovery Services</h2> 
       <p>For green pool/water recovery services,<br> 
       simply call for your free quote!</p> 
      </section><!-- Water Recovery Services section ends--> 
      </section> 
     </div> 
     <!-- Services section ends--> 

     <!-- Reviews section--> 
     <!-- Section dividers. These expand 100% and are used to separate the sections--> 
     <div class="section-dividers" id="reviews-section"> 
     <!-- Section inner wrappers. These contain the section max-width--> 
     <div class="section-inner-wrapper"> 
      <section id="reviews"> 
      <header><!--Ribbon ends--> 
       <p><span class="dark-blue">See what our valued customers have to say about Tidy Pools quality swimming pool cleaning and maintenance service.</span><span class="yellow"> This is just a sample of the kind testimonials we have received, and we look forward to adding yours!</span></p> 
      </header> 
      <ul id="people-reviews"> 
       <li>&#8220; I have had pools for 27 years. Tidy Pools is the most professional, honest and reliable company I’ve had work for me! Your integrity makes me smile and you’ve always been so fair. Thank you. &#8221; <br> 
       <span class="review-names">&#8211; Roxane B.</span></li> 

       <li>&#8220; I have had pools for 27 years. Tidy Pools is the most professional, honest and reliable company I’ve had work for me! Your integrity makes me smile and you’ve always been so fair. Thank you. &#8221; <br> 
       <span class="review-names">&#8211; Roxane B.</span></li> 
       <li>&#8220; I have had pools for 27 years. Tidy Pools is the most professional, honest and reliable company I’ve had work for me! Your integrity makes me smile and you’ve always been so fair. Thank you. &#8221; <br> 
       <span class="review-names">&#8211; Roxane B.</span></li> 
      </ul> 
</section><!-- Reviews section ends--> 

JS

// ******************************** ANIMATED SCROLLING ******************************** 
$('#navbar ul li a').bind('click', function(e) { 
    e.preventDefault(); 
    $('html, body').animate({ 
     scrollTop: $(this.hash).offset().top -190 
    }, 300); 
    // edit: Opera requires the "html" elm. animated 
}); 

這裏是直播網站鏈接http://tidypools.com/dev/

大提前感謝!

+0

你在哪裏設置你scrollspy偏移?它在js中默認爲10. – Marc 2013-03-05 02:59:49

+0

。 .top -190(The -190) – Daniel 2013-03-05 03:04:55

+0

你確定嗎?這設置你的動畫滾動的'scrollTop',但我不確定這些設置scrollspy的頂部。我不使用Scrollspy,所以我不確定。但是你的問題似乎與它認爲頂端的位置有關,所以我會密切關注。 – Marc 2013-03-05 03:19:45

回答

5

您沒有正確設置您的data-offset,如Twitter Bootstrap documentation中所述。

您需要將<body>標籤固定在類似:

<body data-spy="scroll" data-offset="170" data-target="#navbar"> 
+0

再次感謝!我真的很感謝幫助... – Daniel 2013-03-05 04:04:44

+0

當然。祝你好運! – Marc 2013-03-05 04:05:53

+0

'data-offset'對我來說不太合適,但是這樣做: '$('body')。scrollspy({target:'#navbar',offset:170});'' – corykon 2017-05-08 17:35:19