What is the best way to create a fixed navigation bar that only stays fixed on particular sections of my website?

Question

What is the best way to create a fixed navigation bar that only stays fixed on particular sections of my website?

In my digital portfolio, I have divided it into "4 sections," each represented by a separate scrollable web page. These sections are also known as parts, starting from #part1 up to 4.

For section 1 (#part1), I prefer not to display the navigation bar. However, for sections 2, 3, and 4 (identified as #part2, #part3, and #part4), I would like the navigation bar to be visible.

I found an interesting example site that showcases the kind of navigation bar I want to implement in my portfolio.

I tried grouping sections 2, 3, and 4 together, but removing 'fixed-top' removed the navbar from section 1 while causing navigation bars in sections 3 and 4 to disappear.

Question:

How can I have the navigation bar appear on sections 2, 3, and 4, but remain hidden on section 1?

View my website's code

<body>
    <!-- Page content -->
    <!-- SECTION1 -->
    <section id="part1">
     .
     . (omitted for brevity)
     .
    </section>
    <div class="wrapsections">
        <nav class="navbar fixed-top navbar-light bg-faded">
         .
         . (omitted for brevity)
         .
        </nav>
        <!-- SECTION2 -->
     .
     . (omitted for brevity)
     .
        </section>
        <!-- SECTION3 -->
     .
     . (omitted for brevity)
     .
        </section>
        <!-- SECTION4 -->
     .
     . (omitted for brevity)
     .
        </section>
    </div>
</body>

javascript jquery html css twitter-bootstrap-4

Answer 1

Answer №1

For a solution in CSS, you can utilize the position:sticky property

CSS

.fixed-top{
      position:sticky;
    }

Find a demo here

I trust this information will be beneficial to you

Answer 2

For a solution in CSS, you can utilize the position:sticky property

CSS

.fixed-top{
      position:sticky;
    }

Find a demo here

I trust this information will be beneficial to you

Answer 3

Answer №2

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

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

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

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

Feel free to use the updated code provided above and also check out the changes in the js-fiddle link. Thank you.

Answer 4

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

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

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

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

Feel free to use the updated code provided above and also check out the changes in the js-fiddle link. Thank you.

What is the best way to create a fixed navigation bar that only stays fixed on particular sections of my website?

Answer №1

Answer №2

Similar questions

In the production build of Next.js, accessing dynamic routes may lead to a 404 error

Invoke a function within the <img> tag to specify the source path

How can I prevent event propagation in Vuetify's v-switch component?

What is the best way to terminate a "for await ...of" loop if it fails to finish within a specified timeframe?

The background colors are not extending to the full width of the screen

What is the best way to apply a CSS class to a ComponentRef that has been generated in Angular 5

Connect the input field to a dictionary

When executing my code to delete a file and remove it from the database, an error message pops up in the console

I am in need of assistance in developing an image slider using react.js. Can you help

JQuery fails to keep up with the dynamic updates that angularjs effortlessly handles

Scrolling horizontally in a container using the mouse wheel

What is the significance of utilizing app.set() and app.get() in applications?

Harness the power of the chessboard.js JavaScript library for enhancing your

When coding in JavaScript, the value of "this" becomes undefined within a class function

JavaScript is reliant on the presence of the alert() function to properly function

Invoke JavaScript when the close button 'X' on the JQuery popup is clicked

What are some ways to conditionally implement dynamic imports?

Open the navigation menu by clicking on either the navigation links or anywhere outside of it

How to strategically break Bootstrap 5 button groups for different resolutions?

Using Observables to assign values received from API calls to each element during loop iterations