App.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<script setup> import { ref } from 'vue'; import { useFixedHeader } from 'vue-use-fixed-header'; const headerRef = ref(null); const { styles } = useFixedHeader(headerRef); </script> <template> <header class="Header" ref="headerRef" :style="styles"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> <a href="#">Link 5</a> <a href="#">Link 6</a> </header> <!-- Content for scrolling --> <div class="content"> <p v-for="i in 50" :key="i">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum.</p> </div> </template> <style scoped> .Header { position: fixed; /* Keeps the header fixed at the top */ top: 0; width: 100%; padding: 1rem; display: flex; align-items: center; gap: 1rem; background-color: tomato; z-index: 1000; /* Ensure the header is above other content */ } .Header a { color: white; } .content { margin-top: 120px; /* To prevent content from being hidden under the fixed header */ padding: 1rem; height: 2000px; /* Or any other large value to create a scrollable area */ } </style> |
