Hide and show navbar when scrolling page with vuejs3

Français
,
#1

Untitled
Untitled1622×832 284 KB

bonjour ,
je travaille sur un projet web en utilisant nuxt3 qui est basé sur vue3 , dans mon dossier components j’ai deux fichiers (components) : barinfo.vue et navbar.vue

ce que je veux faire , c’est quand je scroll la page barinfo doit se cacher et navbar reste fixe , et quand je remonte le sroll le barinfo doit reaparaitre

comme ceci :

#2

Hi @Yadev7
I have created a dummy project using your previous project, you just need to create the components and add the class on barInfo component according to the position of scrollbar.
Please check the code link:

I hope this helps.

#3

i don’t know how to use it

#4

@Yadev7 Can you explain, which part you don’t understand ?

#5

i have Barinfo.vue :

  <nav class="navbar navbar-expand-lg bg-dark">

    <div class="container ">

      <div class="text-white justify-content-left"> Lundi - Vendredi, 7h30 à 19h / Samedi - J feriés, 8h à 12h

      </div>

      <div class="text-white justify-content-right"> Appelez nous sur &nbsp; 05 35 51 70 30 </div>

    </div>

  </nav>

and : Navbar.vue

<nav class="navbar navbar-expand-lg navbar-light bg-light">

  <div class="container-fluid">

    <a class="infol navbar-brand col-5" href="/">

      <img src="/assets/images/logo.png" height="50" alt="logo" />

    </a>

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"

      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

      <span class="navbar-toggler-icon"></span>

    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">

      <ul class="nav navbar-nav">

        <li class="nav-item">

          <NuxtLink class="nav-link" to="/">ACCEUIL</NuxtLink>

        </li>

        <li class="nav-item">

          <NuxtLink class="nav-link" to="/qui-sommes-nous">QUI SOMMES NOUS</NuxtLink>

        </li>

        <li class="nav-item">

          <a class="nav-link" href="https://pubmed.ncbi.nlm.nih.gov/?term=biognach">PUBLICATIONS</a>

        </li>

        <li class="nav-item">

          <NuxtLink class="nav-link" to="/analyses">ANALYSES</NuxtLink>

        </li>

        <li class="nav-item">

          <NuxtLink class="nav-link" to="/contact">CONTACT</NuxtLink>

        </li>

      </ul>

      <form class="d-flex">

        <NuxtLink class="nav-link" to="/rendez-vous">

          <button type="button" class="btn btn-success"> PRENDRE RENDEZ VOUS </button>

        </NuxtLink>

      </form>

    </div>

  </div>

</nav>

and app.vue :

<Barinfo />

<Navbar />

<NuxtPage /> : this is a content of my website 

<Footer />

the objectif is to make a Barinfo Sticky and navbar fixed when i scroll down

#6

As you said Barinfo is sticky and Nav is fixed. Barinfo is sticky for scrolling upto a view point, then it scrolls and comes back again when we scroll up. I have use simple CSS position property to achieve that. Please look into the src code provided below:

I hope this helps.