Javascript 如何将导航栏固定在网页的特定部分？

我的数字作品集将由“4个部分”组成，即4个单独的可滚动网页。请注意，我的章节也被称为零件。例如，第一节是

#part1

，一直到第四节

在第1部分中，我不希望导航栏可见。但是，在第2、3、4节（称为

#part2、#part3和#part4

）中，我希望出现导航

这是我发现的一个网站，我希望我的投资组合在导航栏上看起来像这样

我确实尝试将2,3,4节包装在一起，但如果我删除“固定顶部”，它将从第1节中删除导航栏，但第3,4节中导航栏将不可见

问题

---

如何将导航栏放置在第2、3、4节上，但在第1节上不可见

嗨，我叫利亚姆·多切蒂
我是来自伦敦的前端Web开发人员
跟我联系。

查看我的作品

这是第三部分

这是第四部分

我有一个CSS解决方案，请尝试使用

position:sticky

属性

CSS

希望这有帮助

$(document).ready(function(){
$('.navbar').hide();
  $(".fa.fa-angle-double-down").on('click', function(event) {
        event.preventDefault();
    if (this.parentElement.hash !== "") {
      event.preventDefault();

      // Store hash
      var hash = this.parentElement.hash;
console.log(`hash = ${hash}`);
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        window.location.hash = hash;
      });
    } // End if
    console.log(`hash2 = ${hash}`);
  });

  $(window).bind('scroll',function(){   
    if ($(window).scrollTop() > 50) {
            $('.navbar').show();
    }else
    {$('.navbar').hide();}
  })
});

---

请使用此代码，我还更新了js fiddle check out。

Hi，导航栏在第一节仍然可见，我不会看到。谢谢你的帖子。@JonBridge你使用的是哪个版本的引导程序？？？，Bcoz我的代码在我的桌面上使用引导程序v4Hi工作，导航栏在第一节仍然可见，我不会看到。谢谢你的来信。

.fixed-top{
      position:sticky;
    }

$(document).ready(function(){
$('.navbar').hide();
  $(".fa.fa-angle-double-down").on('click', function(event) {
        event.preventDefault();
    if (this.parentElement.hash !== "") {
      event.preventDefault();

      // Store hash
      var hash = this.parentElement.hash;
console.log(`hash = ${hash}`);
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        window.location.hash = hash;
      });
    } // End if
    console.log(`hash2 = ${hash}`);
  });

  $(window).bind('scroll',function(){   
    if ($(window).scrollTop() > 50) {
            $('.navbar').show();
    }else
    {$('.navbar').hide();}
  })
});