Creating a fixed list with top-sticking elements on a webpage using HTML

Creating a single page webapp using Vue/Vuetify, I am facing an issue with building a list (v-list) of items on the right side that requires scrolling. Even though the list is longer than the page height, I want to prevent the rest of the page from scrolling.

While I have managed to achieve this setup, my challenge now is to dock items in a non-scrollable area above the list without having to recalculate the scrollable area height in JavaScript.

I am utilizing flexbox and grid box in my design but lack experience in modern HTML approaches.

htmlcssvue.jsflexboxgrid-layout

Answer №1

Make sure to utilize the position: sticky CSS property when creating sticky elements. Remember to specify the positioning using the top (or other relevant) property, and ensure that the sticky elements are direct children of the scrolling element for proper functionality!

ol {
  height: 200px;
  overflow-y: auto;
  position: relative;
}

li {
  padding: .5em 0;
}

.stickme {
  top: 0;
  position: sticky;
  background: lightgreen;
}
<ol>
  <li>I'm normal</li>
  <li>I'm normal</li>
  <li>I'm normal</li>
  <li>I'm normal</li>
  <li class="stickme">I'm sticky</li>
  <li>I'm normal</li>
  <li>I'm normal</li>
  <li>I'm normal</li>
  <li>I'm normal</li>
  <li>I'm normal</li>
  <li>I'm normal</li>
  <li>I'm normal</li>
  <li>I'm normal</li>
</ol>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Opening a file upon launching in Nativescript-Vue: A step-by-step guide

After following the steps outlined in this article, my app is successfully able to open a file with a simple click. Upon launching the application, I see the following message in my console.log: (Foundation) [com.apple.foundation.filecoordination:claims] ...

vue.jsnativescriptfile-association

Next.js and Material UI - issues with dynamic styles not functioning

I recently started using Next JS in combination with Material UI, following the example project setup provided in the documentation on Github: https://github.com/mui-org/material-ui/tree/master/examples/nextjs My main objective is to utilize Material UI&a ...

javascriptcssmaterial-uinext.js

The width of table cells within a div is completely disregarded

The cell width property seems to be ignored in this situation. Despite trying numerous approaches, the cells are splitting into equal portions and not respecting the specified width. Inspecting the code did not reveal any unexpected inheritance that could ...

htmlcsshtml-table

Customize the <td> column based on values and rows. Modify the current jQuery code

This code snippet contains an HTML table that dynamically populates based on the dropdown selection. The script included in the code highlights the best and worst values in the table by changing their background color to green and red, respectively. & ...

javascriptjqueryhtmlbootstrap-4

Need help resolving validation errors in vee-validate?

Is there a way to remove all the errors generated by vee-validate when signing out? The following code does not seem to work, as the form errors are still displaying. Why is that? sign_out: function (e) { console.log('sign me out') var s ...

vue.js

Scrolling Horizontally with Bootstrap Cards

I'm trying to implement horizontally scrolling cards using Bootstrap V.5, like this: <div class="container-fluid py-2"> <div class="d-flex flex-row flex-nowrap" style="overflow: auto;"> <div cl ...

htmlcssbootstrap-5

What is the integration of Google URL format with a PHP application?

When it comes to php websites, URLs are commonly written in the form of page.php?id=123 or rewrite moded page/Id/123 However, when looking at google I observed that URLs look more like google.com/search?q=Wordpress I attempted to structure website links ...

phphtmlurlcurl

Show a multipage report of a MySQL database

I have a MySQL database with some information that I would like to make accessible to everyone, with an option to edit. <?php $username = "VKSolutions"; $password = "VKSolutions@1"; $hostname = "VKSolutions.hostedresource.com"; $database = "VKSolut ...

phphtmlmysql

What is the proper way to convert the Vue3 ::v-deep SASS syntax to utilize :deep?

HTML: <template> <form class="bg-white"> <div class="source-field"> ... The original SASS code looks like this: .form::v-deep .source-field width: 129px display: inline-block margin: 0px 2px 5px 2px ...

cssvue.jssassvuejs3

How to send index to child event listener from parent component in Vue.js

Within a v-for loop, I am iterating over a list of objects: <div v-for="(element, index) in myArray"> <child @event-fired="handleEvent(index, dataFromChild)"></child> </div> When the event is fired from the child component, I ...

vue.js

The 'name' property of Axios and Vuex is not defined and cannot be read

When making a call to axios in my mounted function to retrieve profile data, I send the payload to the 'set_account' Vuex store upon success. To access this data, I utilize MapGetters (currentAccount) in computed properties. However, when tryin ...

javascriptvue.jsaxiosvuex

Tips for Adjusting the Position of a DIV Element Slightly Upwards

I am having trouble positioning the home-link image in my hovering navigation bar. The URL to my blog is: . Ideally, I want the image to be aligned with the text tabs next to it, but no matter what I try, I can't seem to move the "home" icon up by abo ...

htmlcssblogger

Utilizing Jquery: Extracting the value of a child element upon clicking the encompassing parent div

I've created a table-like structure using divs instead of tables (because I strongly dislike tables). However, I'm facing an issue. I want to be able to click on one of the div elements and extract the values of its child elements. <div cla ...

jqueryhtml

Comparing functions and function issues when using onClick in JavaScript

I have successfully created an Image Element on my web page dynamically using JavaScript. I am now trying to set an onClick event for the newly created image element. However, I am encountering a problem and I cannot figure out why?, This is the code I ...

javascripthtml

Is it possible to refresh the chat-box using PHP?

I recently created a chat box application using PHP, but I'm facing an issue with its automatic reload functionality. Is there a way to implement auto-reload in PHP itself, or would it be better to restructure the system to utilize AJAX? Additionally, ...

phpjavascripthtmlajax

"Interactive Connect 4 Game in Javascript - Drop the disk into the bottom row of the chosen

Check out this awesome Connect4 game I found: http://codepen.io/anon/pen/lmFJf I have a specific goal in mind for the game. When I click on an empty space in any column, I want it to automatically drop into the lowest available spot in that column, follow ...

javascripthtmlcss

Ways to display a GIF image as a pop-up during data loading in an MVC application

I am working on a project using the MVC framework. The application retrieves a large amount of data during loading. I would like to display a loading image - a .gif file while fetching records. Below is the code snippet I am currently using: //Loads rec ...

javascripthtml

Stopping Vue Router from re-rendering the page: Is it possible?

I am having an issue with my News.vue and News-View.vue. Whenever I navigate to news/1, it directs me to the News-View.vue page. The problem arises when there are multiple search filters (such as category, date, etc.) and infinite scroll implemented in the ...

vue.js

Struggling to make Vue.js transition effects function properly?

I'm having trouble getting a vue.js (version 1) transition to work. I copied the code from their official website, but it's not running the javascript console.logs! Vue.transition('fade', { css: false, enter: function ( ...

javascriptvue.jsvue-component

Unable to adjust dimensions with CSS width and height properties

I'm currently working on developing an online game with a login screen inspired by Paper.io. I have created the username input and play button, but there seems to be an issue with the width and height specified in the CSS file for the input field. Eve ...

javascriptcsshtml