顶部导航已隐藏

当我滚动到页面底部并看到页脚时，我不希望隐藏导航顶部。

下面是滚动之前的状态。

Below is a screenshot when scrolling down to the page.

这是代码

<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>

如果您能检查一下，我将不胜感激操场 https://play.vuetifyjs.com/#eNqlVMtu2zAQ/JWFgMIpGkp2EvTgOkF666VfEOVASyubtfgASSsyDP17l3rYknxIgepgmLvLmZ1Zkm/n6KcxcXXEaB1tPEpTco8vqQLY5KICkT+nETcmjdoYRStGy34xLNmW25c98hztJrlGLkUBKSu5cwSWs6LEGsIPW7IVWy2XF/AeUfFK7LgXWrHc8g+01yzAVluiISCbRuO4QSu5QuXHwULUmI8DQxeGsxUY7UTL4rzIDqcpnvOnEqlS8prtUez2fg0ZL7M7arjaA4PvT6b+Ot4zEtFrHjC6ntfwYGpwuhQ5GKEOP2DAJcgvExPCRy4AuTgNkjsea88KgeVEWPgqJnWOZayOcttalGnlyZFfLc1UXvikUFRE9s8TzqOhzFMYzTznTyZI6jhu0yXfYnml7iXC3cyr8CVTwxJybHwO6CDdHATKT06K5EJdZrrdsZ3FE5iSTY8UwO+2rmtpPqVpU+thZufL0McmwjdYmHrRzLWMetha/UH9cntAxR6mhbMRDybdnc8TlqYJdn1iTtB+vWKTAnKm0Nqjvd4WGv9LFwt7u3/Dle6ubHfpe5xNMnoLaOkyK4wHh/7YFQpptPVwBosFNFBYLWFBz8giJEmM8zPjnkNluDxLUrZJOkCCiu6jDosEmfiP04peonNASfuES6M1tJEQI46wTqO998atkyTLFW2jcy8qGyv0iTIyeaWyxB6VFxJZruXrY/wYP5E458fhGJ1sB+bQEkga3Y9ovCjoTfiUqq9sGVYPHUUfY3QbXOC4wU6IsELLLCqaT7hI/yZptm0sa5a6kRbYm1Q1ZHhJr4+beZ251ue3ocn/09yiBaj3wNjcR22jRN3tiN7/Ah629Tk=

我尝试过以下方法

当我从“v-navigation-drawer”中删除“position-sticky”类时，即使页脚可见，顶部的导航区域也不会向上移动。但是，这样做时，导航会水平延伸到页脚边界之外，如下图所示：

我可能无法用英语很好地解释它，但作为布局https://pro-bravia.sony.net/en/guides/ https://pro-bravia.sony.net/en/guides/我希望它就像我向下滚动到该网站一样

在我目前正在开发的应用程序中，如果我使用以下 v-navigation-drawer，导航的高度将减半。

<client-only>
    <v-navigation-drawer
      permanent
      class="position-sticky"
      :style="{ maxHeight, minWidth }"
      style="
        height: fit-content;
        margin-top: 64px;
      "
      width="250"
    >
      <v-row justify="center">
        <v-expansion-panels :modelValue="panel" :multiple="true">
          <v-expansion-panel
            v-for="(item, i) in matchedNavObject.children"
            :key="i"
          >
            <v-expansion-panel-title>{{ item.title }}</v-expansion-panel-title>

            <v-expansion-panel-text
              v-for="(navItem, j) in item.children"
              :key="j"
            >
              <nuxt-link
                :to="`${baseUrl}${navItem._path}`"
                class="text-decoration-none"
                :class="{
                  active: `${navItem._path}/` === route.path,
                }"
                >{{ navItem.title }}</nuxt-link
              >
            </v-expansion-panel-text>
          </v-expansion-panel>
        </v-expansion-panels>
      </v-row>
    </v-navigation-drawer>
  </client-only>

您可以通过简单地降低导航栏的高度来做到这一点。 Vuetify 默认是height: calc(100% - 64px);，但您可以覆盖它以适应内容：

<v-navigation-drawer
  class="position-sticky"
  style="max-height: calc(100vh - 64px); height: fit-content;"
>

请注意，当导航栏内容占据的高度超过窗口高度减去页眉和页脚高度时，这仍然会滚动。您可以通过为页脚保留空间来避免这种情况（即设置max-height: calc(100vh - 128px)在导航抽屉上），但是即使页脚不可见，该空间也不会被使用。

最后，如果导航超出可用高度并且主要内容占用的空间小于该高度，则导航栏将在顶部被切断，所以我会添加一个margin-top: 64px到导航抽屉，只是为了安全起见。

这里有一个操场 https://play.vuetifyjs.com/#eNq1VcFu2zAM/RXCl3RYZSdpsYOXFt1tl31B3YNiy4lWWxIkxU0Q+N9HWXZiOUW6YtgliMgnPj5SpJ+P0Q+l4mbHojRaWVarilr2mAmAVcEb4MVDFlGlsqizobUheOwPw5GsqX7cMlowvUrOlhPIRcoragwGK0hZsT24HzInC7KYz0/B+4iCNnxDLZeCFJq+MX32AqylRhoMpLNobFdM11QwYcfGgVRRsgAlDe+CGsvz10N43dhDxRA5tgHUdE+2jG+2NoWcVvkNZttsgcC3e7X/8j0ED8CSW5JLYTGXCaKmesMFsVKlXYTAPeYe1cOXL4wzJOtrkcJS7cHIiheguHidikgH+HHIEAuM/fnZneArzNR+1oa3ggTAXQC8kYnQjL2ybG9JyVlVhC6AhtSyYFUsdvW6a9iYdZoj1oYLxCzda5i6jGUKfffv+exBOWme5NJd0TWrPDf0Pen7BDfYwemFZKL7cwJ7gusK/4++T2tbJfiqxmOHc3sxd+gPBrOmXJxmar0hG80OoCoSTjDArw7nU7r+ki/fZlDE9x/nea4xh7WWb5gv1a9MkOXVVzwU6eZ4DFja1pXrg+I47eeNFgCwMqWUlunzcsL2P3qbu+v/DRvUb0i/Y/s4q2S0evFocs2VBcPszgN5raS2cATNSmih1LKGGW7tmXOiGGMnhXtwSLeu5p0yDwnm3iNw4BCwSjwjckW3kSdDxSr+baTAL8PRxch6h8miFDqLs2ES7pxFW2uVSZMkLwRew8HgjY4Fs4lQdfKEsETvhOU1I4Wsn+7iu/ge1Rs7NsfM1F1HDdMYJItuRzSWl7i0P6TqkR3DYukpehvBcTGO4yJ2goQN00QzgQ10k/Z3kibXxrImrgtpjr3NRIsFr3Brm0mtc9PV+XlI8t80d9FcqBfH2N5GXaJI7W9EL38AtJVdXQ==

这是另一个操场 https://play.vuetifyjs.com/#eNqlVc2O2jAQfpVRLoA2Tvan7YEC2r21h157WVaVCQa8JI5lGxYU5d07thPiBKStVA4knhnPfN/85bWKXqRMjgcWTaOZYYXMqWGLpQCYHQmV0r22B7KiarFjdM3ULO0kjcmaHyHLqdbzZbQmm5ydwP6Re/JAHu7vl1Fj6LwJeuRbangpyFrRD6ZaHcCqVBgAnahl1EklUwUVTJhO1AaTlDyALDV37rTh2f4cXtXmnDO06yQABT2RHePbnZlCRvNsjAiPOyDw7Ys8Tb6Hpq3ZhhuSlcIghp6+oGrLBTGlnLrbgbKLeeHu2LOTpEJbtPhkuYZpUa5Z/pvmBwvUCZcRSg+54dKBN+rAghTedgRHsilt6sYcaxkDnwAXgLn+iUdtPe7ZGdV84OmWL2K4ydmiqsD6StwJ6toW/rblUnzukp2C+vnfBXIDM4Z3h9pFzXY8Xysm+sWzv4bJ+1Az4AWABBrPFw4DnLcYIdB+rq+NwpJea3XX7ai8avcgW5ingiLhtp1XW7JV7AwyJ+HQAPxyVr4Dg9h27qZtj1eXpvZ2P9wR7mAkT6MaOyCIslLlB+Khas8EeRy0RHMfxlXVc1XXOB8hcwzfo2q5tCshUCLLTVkaprr5NhjSy+w9/+ZXj18u+D5Lg52ER50pLg1oZg5+NfFClspABYptoIaNKgsY4TobWSUC12aQibm1tNPuSHgLrA7usZ7BY8/AD5fX2EEMVFtm3HChdpwzsTW7GCTa8dME5g33F6XoObHYxhV4I6hjGP9xEzpfwJjf3cVIwjXotLmPReNQT/o421gWiXfeAhh/jWFkhwZGk6SgslFjiqzMBnFL4TJS6ORy9QmBdAOCzQLOajSZeEVTcPfAv1nq64D0ojjyJcC6y+RdlwI/JJW1wy3jFLh2puAkVoalsedltDNG6mmaZmuB13D58aNKBDOpkEX6jGapOgjDC0bWZfH8lDwlX7CbtAnFCdOF62LNFDpZRnEQxvANfgU+DdVYuggPjz5EIyM5XWkb48p3igGPTBFMI7Yyfrz+kdLgWkhroLqiZqPj4qox4TkXez3IdaZdnl9bkP/H2Xmzrt5sxDqOHFAM7W9Eb38BMt2VPA==导航栏中带有扩展面板