Question 235291 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Top navigation is hidden

I don’t want the top of the navigation to be hidden when I scroll to the bottom of the page and see the footer.

Below is the state before scrolling.

enter image description here

Below is a screenshot when scrolling down to the page.
enter image description here

Here is the code

<template>
  <div id="app">
    <v-app>
      <v-app-bar>header</v-app-bar>
      <div class="d-flex flex-0-1-100">
        <v-navigation-drawer
          border="r"
          permanent
          fixed
          class="pa-1 position-sticky"
          style="max-height: calc(100vh - 64px)"
        >
          <div style="border: 2px solid pink; height: 100%">
            nav bar
            <v-text-field
              v-model.number="contentHeight"
              min="0"
              step="400"
              type="number"
              label="content height (px)"
            />
          </div>
        </v-navigation-drawer>

        <v-main class="bg-grey pl-0">
          Main content
          <div
            :style="{height: contentHeight + 'px'}"
            class="bg-brown-darken-2"
          >
            content ({{contentHeight}}px)
          </div>
        </v-main>
      </div>
      <v-footer border="t">footer</v-footer>
    </v-app>
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  const contentHeight = ref(1000)
</script>

I would appreciate it if you could check the playground

I have tried the following

When I remove the "position-sticky" class from the "v-navigation-drawer," the navigation area at the top does not move upwards even when the footer is visible. However, in doing so, the navigation extends horizontally beyond the footer’s boundary, as shown in the image below:

enter image description here

Tags:

3

Answers


  1. 0

    how about fix code

      <v-app-bar>header</v-app-bar>
  <div class="d-flex flex-0-1-100">
    <v-navigation-drawer
      border="r"
      permanent
      app
      fixed
      class="pa-1"
      style="top: 64px; bottom: 50px"
    >
      <div style="border: 2px solid pink; height: 100%">
        nav bar
        <v-text-field
          v-model.number="contentHeight"
          min="0"
          step="400"
          type="number"
          label="content height (px)"
        />
      </div>
    </v-navigation-drawer>

    <v-main class="bg-grey ml-0" style="min-height: calc(100vh - 64px)">
      <v-container fluid class="pa-0">
        Main content
        <div
          :style="{height: contentHeight + 'px'}"
          class="bg-brown-darken-2 mb-8"
        >
          content ({{contentHeight}}px)
        </div>
      </v-container>
    </v-main>
  </div>

  <v-footer fixed app border="t" style="width: 100%">footer</v-footer>

    enter image description here

    Login or Signup to reply.
  2. 0

    Adding the height:100% to the app, remove fixed attribute of the v-navigation-drawer, and adding overflow-auto to the content should work as expected

    playground

    Login or Signup to reply.
  3. 0

    I’ve used the wireframe template from the Vuetify documentation and tried to keep it as simple as it can be. Hope this helps:

    Playground

    <template>
  <v-app id="inspire">
    <v-app-bar>
      <v-app-bar-nav-icon @click="drawer = !drawer" />
    </v-app-bar>
    <v-navigation-drawer v-model="drawer" clipped class="pa-1" permanent>
      <div style="border: 1px solid pink; height: 100%">Navigation</div>
    </v-navigation-drawer>
    <v-main>
      <v-card rounded="0" min-height="100vh" class="bg-brown-darken-2 pa-1">
        Main Content
      </v-card>
      <v-footer style="border: 1px solid pink">Footer Content</v-footer>
    </v-main>
  </v-app>
</template>

<script setup>
  import { ref } from 'vue'

  const drawer = ref(true)
</script>

    If you want to keep the navigation temporary, add temporary attribute to the v-navigation-drawer component.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search