2017-05-31 72 views
0

Im實現側邊菜單到幫助頁面。帶內部鏈接的bootstrap側面菜單跳轉點擊

菜單和內部鏈接正在工作,但點擊旁邊的菜單會在導航欄後部分跳轉。

我不知道如何解決這個問題,作爲一個新手和所有。

有人能告訴我請

這裏是html

<div class="container-fluid info-pages"> 

<div class="col-md-3 col-xs-12" id="leftCol"> 
<h5>HELP</h5> 
     <ul class="help nav nav-tabs nav-stacked" id="sidebar"> 
    <li><a href="#Customer_Service">Customer Service</a></li> 
    <li><a href="#Shipping&delivery">Shipping & Delivery</a></li> 
    <li><a href="#ReturnPolicy">Return Policy/Exchanges</a></li> 
    <li><a href="#stockist">Stockist/Brand Inquiries</a></li> 
    <li><a href="#webissues">Web Issues</a></li> 
    <li><a href="#faq">FAQ</a></li> 
    </ul> 
</div> 

<div class="col-md-6 col-xs-12" id="mainCol"> 

    <h5 id="Customer_Service">CUSTOMER SERVICE</h5> 


    <div class="col-md-6 col-xs-12"> 
     <ul class="customer-service"> 

     <li>Call: +555-5555555</li> 
     <li>Email: [email protected]</li> 

     </ul> 
    </div> 

    <div class="col-md-6 col-xs-12"> 
     <ul class="customer-service"> 

     <li>Monday—Friday</li> 
     <li>11:00—18:00 GMT</li> 
     <li>Saturday</li> 
     <li>11:00 - 18:00 GMT</li> 
     <li>Sunday</li> 
     <li>Closed</li> 
    </ul> 
    </div> 


      <br> 

    <h5 id="Shipping&delivery">SHIPPING & DELIVERY</h5> 
     <p> Chartreuse master cleanse succulents, chicharrones kombucha chambray DIY green juice marfa roof party fanny pack lo-fi live-edge godard pork belly. Enamel pin venmo raclette occupy chartreuse plaid. Offal raclette live-edge venmo kale chips, humblebrag man braid hammock cliche quinoa meh mumblecore. Blue bottle gentrify butcher pop-up subway tile, food truck XOXO bitters af. Hot chicken bitters knausgaard four dollar toast, truffaut tousled etsy cray iceland cold-pressed pabst single-origin coffee poutine crucifix. Pitchfork artisan crucifix, sriracha cray four loko chillwave. Next level iceland craft beer, kale chips occupy bushwick chambray schlitz hashtag hammock locavore poke squid. 
     </p>  

      <br> 

    <h5 id="ReturnPolicy">RETURN POLICY/EXCHANGES</h5> 
     <p>Chartreuse master cleanse succulents, chicharrones kombucha chambray DIY green juice marfa roof party fanny pack lo-fi live-edge godard pork belly. Enamel pin venmo raclette occupy chartreuse plaid. Offal raclette live-edge venmo kale chips, humblebrag man braid hammock cliche quinoa meh mumblecore. Blue bottle gentrify butcher pop-up subway tile, food truck XOXO bitters af. Hot chicken bitters knausgaard four dollar toast, truffaut tousled etsy cray iceland cold-pressed pabst single-origin coffee poutine crucifix. Pitchfork artisan crucifix, sriracha cray four loko chillwave. Next level iceland craft beer, kale chips occupy bushwick chambray schlitz hashtag hammock locavore poke squid. 
     </p> 

     <br> 

    <h5 id="stockist">STOCKIST/BRAND INQUIRIES</h5> 
     <p>Chartreuse master cleanse succulents, chicharrones kombucha chambray DIY green juice marfa roof party fanny pack lo-fi live-edge godard pork belly. Enamel pin venmo raclette occupy chartreuse plaid. Offal raclette live-edge venmo kale chips, humblebrag man braid hammock cliche quinoa meh mumblecore. Blue bottle gentrify butcher pop-up subway tile, food truck XOXO bitters af. Hot chicken bitters knausgaard four dollar toast, truffaut tousled etsy cray iceland cold-pressed pabst single-origin coffee poutine crucifix. Pitchfork artisan crucifix, sriracha cray four loko chillwave. Next level iceland craft beer, kale chips occupy bushwick chambray schlitz hashtag hammock locavore poke squid. 
     </p> 

     <br> 

    <h5 id="webissues">WEB ISSUES</h5> 
     <p>Chartreuse master cleanse succulents, chicharrones kombucha chambray DIY green juice marfa roof party fanny pack lo-fi live-edge godard pork belly. Enamel pin venmo raclette occupy chartreuse plaid. Offal raclette live-edge venmo kale chips, humblebrag man braid hammock cliche quinoa meh mumblecore. Blue bottle gentrify butcher pop-up subway tile, food truck XOXO bitters af. Hot chicken bitters knausgaard four dollar toast, truffaut tousled etsy cray iceland cold-pressed pabst single-origin coffee poutine crucifix. Pitchfork artisan crucifix, sriracha cray four loko chillwave. Next level iceland craft beer, kale chips occupy bushwick chambray schlitz hashtag hammock locavore poke squid.</p> 


</div> 

這裏是javascript

<script type="text/javascript"> 
    var $body = $(document.body); 
var navHeight = $('.navbar').outerHeight(true) + 10; 

$('#sidebar').affix({ 
     offset: { 
     top: 245, 
     bottom: navHeight 
     } 
}); 


$body.scrollspy({ 
    target: '#leftCol', 
    offset: navHeight 
}); 
</script> 

這裏是.css

/*######## HELP PAGE ########## */ 


.info-pages{ 
    margin-bottom: 20vw; 

    margin-top: 10vh; 

     padding-top:50px; 

} 

.info-pages p,li { 
    font-size: .9em; 
} 

.help{ 
    list-style: none; 
} 

.customer-service { 
    list-style: none; 
} 


@media screen and (min-width: 768px) { 
    #masthead h1 { 
     font-size: 100px; 
    } 
} 



.affix-top,.affix{ 
    position: static; 
} 

@media (min-width: 979px) { 
    #sidebar.affix-top { 
    position: static; 
    margin-top:30px; 
    width:228px; 
    } 

    #sidebar.affix-bottom { 
    position: relative; 
    } 

    #sidebar.affix { 
    position: fixed; 
    top:70px; 
    width:228px; 
    } 
} 

回答

1

試着這麼做:

$('.nav-stacked li a').click(function (e) { 
    e.preventDefault(); 
}) 
+0

以及它沒有任何區別:( – Slowboy

+0

有人跳點擊之前,我插入上面的代碼,請參考這個網址https://jsfiddle.net/yvkkg9d1 /?utm_source = website&utm_medium = embed&utm_campaign = yvkkg9d1 – dev254

+0

是的,這是正確的...但主要文本並沒有移動...例如,如果你點擊F&Q主文本不去F&A – Slowboy