Question

我的数字产品组合将由“4个部分”组成，这4个部分是4个独立的可滚动网页。请注意我的部分也称为部分。例如，第一部分是#part1，这一直到4.

在#part1上我不希望导航栏可见。但是，在2,3,4节（称为#part2, #part3, and #part4）上我想要导航出现。

这是一个example网站，我发现这是我的目标，我的目标是在导航栏方面看起来像。

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

问题

如何将导航栏放在2,3,4部分但在第1部分不可见？

<body>
    <!-- Page content -->
    <!-- SECTION1 -->
    <section id="part1">
        <div class="container h-100 d-flex justify-content-center align-items-center">
            <div class="row">
                <div class="col">
                    <div class="chevron-row bounceInDown animated">
                        <h1 class="text-center" id="title1">Hi, my name is Liam Docherty</h1>
                        <h4 class="text-center" id="title2">I'm a Front-End Web Developer from London</h4>
                        <h5 class="text-center" id="title3">Get in touch with me <a href=#part4 class="txtlink" target=_blank>here</a>.</h5>
                        <hr class="test">
                        <p class="text-center">View my work</p>
                        <a href="#part2">
                            <i class="fa fa-angle-double-down bounce fa-4x"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="wrapsections">
        <nav class="navbar fixed-top navbar-light bg-faded">
            <a class="navbar-brand" href="#">Fixed top</a>
        </nav>
        <!-- SECTION2 -->
        <section id="part2">
            <div class="container-fluid">
                <div class="row">
                    <div class="col">
                    </div>
                </div>
            </div>
        </section>
        <!-- SECTION3 -->
        <section id="part3">
            <div class="container-fluid">
                <div class="row">
                    <div class="col">
                        <p>This is part 3</p>
                    </div>
                </div>
            </div>
        </section>
        <!-- SECTION4 -->
        <section id="part4">
            <div class="container-fluid">
                <div class="row">
                    <div class="col">
                        <p>This is part 4</p>
                    </div>
                </div>
            </div>
        </section>
    </div>
</body>

Answer 1

我有一个CSS解决方案，请尝试使用position:sticky属性

CSS

.fixed-top{
      position:sticky;
    }

Working Fiddle

希望这会有所帮助..

Answer 2

$(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。

如何修复我的导航栏但在我的网页上的特定部分？

2 个答案: