Question

当我单击导航栏的链接时，我希望看到我的整个部门。

$('body').scrollspy({ target: '#navbarSupportedContent' })

<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body data-spy='scroll' data-target='#navbarSupportedContent'>
  <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
    <section id="accueil">1</section> 
    <section id="recherche">2</section> 
    <section id="presentation">3</section> 
    <section id="parcours">4</section> 
    <section id="competence">5</section> 
    <section id="projet">6</section> 
    <section id="cequejaime">7</section> 
    <section id="contact">8</section>
  </div>
</body>

Answer 1

您的问题是，您没有考虑到导航栏绝对定位并从页面流中删除的事实。因此，您的版块正在向后滑动，而该版块的前10vh价值则在导航栏后面消失了。

解决此问题的一种方法是将部分的高度增加到100vh，并在顶部添加填充，以便将内容推到导航栏下方。尝试这是您的CSS，而不是现在拥有的。

#presentation, #parcours, #competence, #projet, #cequejaime, #contact {
    height: 100vh;
    padding-top: 10vh;
}

bootstrap：onclick导航栏margin-top = 10 vh;

1 个答案: