-2

My digital portfolio is going to consist of "4 sections" which is 4 separate scrollable web pages together. Please note my sections are also referred to as parts. For example, section one is #part1 and this goes all the way up to 4.

On #part1 I don't want the navigation bar to be visible. However, on section 2,3,4 which is known as #part2, #part3, and #part4 I want the navigation to appear.

Here is an example site that I found which is how I'm aiming for my portfolio to look like in terms of the navigation bar.

I did attempt to wrap 2,3,4 sections together but if I remove 'fixed-top' it will remove the navbar from section 1 but section 3,4 the navigation bar won't be visible.

Question

How can I place my navigation bar on section 2,3,4 but not be visible on section 1?

My site code

<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>
Jon Bridge
  • 329
  • 1
  • 2
  • 12

2 Answers2

0

I have a CSS Solution, Try using position:sticky property

CSS

.fixed-top{
      position:sticky;
    }

Working Fiddle

Hope this helps..

Chandra Shekhar
  • 3,550
  • 2
  • 14
  • 22
0
$(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();}
  })
});

use this code and also I updated js-fiddle check out, please.

Neeraj Pathak
  • 759
  • 4
  • 13