Question

我在帮助页面上实现了侧边菜单。

菜单和内部链接正常工作，但点击侧边菜单部分跳转到导航栏后面。

我不知道如何解决这个问题，成为新手和所有人。

有人可以告诉我

以下是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: bla@bla.com</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;
  }
}

Answer 1

尝试类似：

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

带有内部链接的bootstrap侧面菜单会在单击时跳转

1 个答案: