Creating an Indicator for Vertical Scrollbars using HTML and CSS

I am currently working on a project where I am trying to replicate the vertical scrollable bar and containers seen on this specific website:

https://i.sstatic.net/ZsvuO.png

Essentially, my website consists of various divs and I would like to implement a scrolling feature. This means creating a vertical scroll bar that shows which section the user is in, along with smooth transitions between sections when scrolling.

Despite my efforts in researching, I have been unable to find the relevant information due to not knowing the correct terminologies for this feature.

How can I achieve this functionality?

I am not seeking code, just guidance on the proper research and experimentation I should undertake to achieve this. Thank you.

jqueryhtmlcss

Answer №1

A popular design known as the Fixed Vertical Navigation Bar or Fixed Sidebar is gaining attention.

Essentially, it's a straightforward navigation bar with CSS rules set to right: 0 to anchor it on the side. It maintains its vertical orientation through width adjustments and replaces typical text with dots for a modern twist. Additionally, it offers users an automated scrolling feature to navigate different sections of the page using hash links paired with element ID's.

If you're interested in creating your own, here are some helpful resources:

  1. Codepen Example (replace "link" text with middle dots)
  2. W3Schools Example (substitute text with middle dots)
  3. Treehouse Example (includes additional related ideas)

For a basic demonstration, consider this minimalistic example:

.left {
  position:fixed;
  top: 30%; left: 0;
  height:100%; width:50px; 
}

ul {
  list-style-type: none;
}

a {
  text-decoration: none;
}
<div class="left">
  <ul>
    <li><a href="#1">•</a></li>
    <li><a href="#2">•</a></li>
    <li><a href="#3">•</a></li>
    <li><a href="#4">•</a></li>
    <li><a href="#5">•</a></li>
  </ul>
</div>

<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
<div id="5"></div>

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

Issue with Google Chrome when entering time using HTML input type time

Hopefully I can figure out a solution for this issue. I am working on an AngularJS project and have the following HTML tag to select time: <input class="input-time" type='time' ng-model="dr.startTime"> The time is displayed in AM/PM forma ...

angularjshtmlgoogle-chrome

Retrieve the value from a dynamically created text field and send it back using ASP.net

On my webpage, there is a button next to an input type='text' text box that I created dynamically (so I can't use the runat="server"). I want to send back what the user has entered in the input box to the server. This is my current approac ...

javascriptc#jqueryasp.netpostback

Combining two containers in CSS

I am currently working on building a website design, and I have a menu positioned on the right side of the layout. Below is the code for the menu along with an explanation. #rightmenu { border-top: 1px solid #000000; border-right: 1px solid #00000 ...

csspositionpositioninghtml

In a designated paragraph, set the display of all <span> elements to none using JavaScript

I have a long paragraph with over 10,000 lines of text and I need a way to quickly remove all the lines without hiding the entire paragraph. Specifically, I want to hide each line individually by changing the span style from "display:block" to "display:non ...

javascripthtml

Ways to exhibit API information leveraging the prowess of Ajax

I am looking for a way to utilize the API in order to present data in an organized manner, similar to the following example: Job Title: Agricultural and Related Trades Percentage of Occupancies in Area: 15.41% Unfortunately, my attempt to showcase the d ...

javascriptjqueryhtmlajaxapi

When the Angular script is executed, the variable is not defined

One of my custom directives receives an object named 'vm' in its scope, which contains a property/value pair (ccirCategoryIncidentI : 3) that I need to access. When I try to log this value with console.log(scope.vm.ccirCategoryIncidentI), it init ...

javascriptjqueryangularjsd3.jsnvd3.js

Repetitive notifications using Jquery

Utilizing the CSS and HTML code below to showcase a notification whenever an event takes place. HTML <div id="notification_wrapper"> <div id="notification"></div> </div> CSS #notification_wrapper { position: f ...

jqueryhtmlcss

Is there a way to trigger the autocomplete function again after adding a space?

How can I show search results in my autocomplete search box for the first time, then clear the selected result and call autocomplete again? <input type='text' class='btnText' id="symptomSearch" tabIndex='1' placeholder=&a ...

jqueryautocomplete

Enhance jQuery dataTable with live updates from Firestore querySnapshot

Currently, I have implemented jQuery dataTable in my project to display data from Firestore. While everything seems to be working fine, an alert keeps popping up in the browser whenever there is an update in the Firestore data: DataTables warning: table i ...

javascriptjqueryfirebasegoogle-cloud-firestore

Retrieve updated information from a specific row in the DataTable

I'm having trouble printing the correct content from a row in my data table. In my file named response.php, the following content is present: //include connection file session_start(); include_once("connection.php"); // initialize all variables $pa ...

phpjquerymysqlajaxdatatables

Drop down menu alignment issue: unable to center menu on the page

My dropdown menu is misaligned and not centering on the page, even after multiple attempts to fix it using HTML and CSS only. I have refrained from using JavaScript or JQuery for this issue. CSS Code: <style type="text/css"> /* STYLING FOR DROPDOWN ...

htmlcssmenudrop-down-menu

Using PHP to insert data from a form with multiple checkbox selections into a MySQL database

Having a form with various fields like Textinputs, Checkboxes, Radios...and seeking to submit it to a MySQL database. Oddly enough, when I remove the checkboxes HTML and associated PHP code, everything functions properly, and all information is successfull ...

phphtmlmysqlformscheckbox

Using a PHP proxy for Cross-Origin Resource Sharing (CORS): A step

I am currently working on integrating a weather API that provides data in XML format. Previously, I used a third-party proxy server to bypass CORS issues, but that service is no longer available. Now, I am leveraging jQuery/Ajax to fetch the data in the fo ...

phpjqueryajax

Obtaining IDs of Divs that have been Dragged into a Drop Zone upon Clicking a Button using JavaScript

I'm currently working on a solution to extract the ids of dragged divs once they have been placed in the drop zone. Each drag component is assigned an id ranging from drag1 through drag8, while the drop zone is labeled as div drop zone. Since there a ...

javascriptjqueryhtmlcss

Trouble arises with saving sessions in IE and cakephp 1.3 through AJAX

Currently, I am in the process of creating an application using cakephp 1.3. In this particular project, there is a requirement where users need to select multiple items from various pages. To achieve this functionality, I am utilizing cakephp Session to m ...

jqueryajaxinternet-explorersessioncakephp

if there is an error in a JavaScript statement

<!DOCTYPE html> <html> <head> </head> <body> <hr> <div> <div id="myPosition"> </div> </div> <hr> <!--Storing the gun array --> <div id ...

javascripthtml

Ajax: What could be causing the post request to be triggered twice?

I am puzzled by the fact that my request is being sent twice, without any clear reason. Here is the code for my simple form: <form method="POST" class="mb-4" autocomplete="off" action="/recipe/add" novalidate id="form"> <div class="form-grou ...

javascriptjqueryajax

What is the best method for clearing DOM variables and storage when a new innerHTML is loaded dynamically in a Single Page Application?

When I load Dynamic HTMLs with JS into a div on an index page, the content of the div gets updated dynamically based on user actions using the JQuery.load function. The loaded HTML includes JS files that are also added to the DOM and work as expected. How ...

javascriptjqueryhtmlangularjsdom

Leverage HTML within JSON for a multilingual website using i18next with Next.js

I am working on a multi-language website using Next.js. To handle the translations, I am using the package i18next. In my JSX code, I define variables like this: {t("satisfied:title")} This means {t("JSONfileName:JSONvariable")} However, when I try to i ...

htmlreactjsjsonnext.js

What is the equivalent of a very deep selector in TailwindCSS?

When working with the v-deep selector to customize the appearance of tiptap, a rich text editor, accessing the .ProseMirror class in SCSS would look like this: editor-content { // ... styles &::v-deep(.ProseMirror) { // ... styles } } ...

cssvue.jsvuejs3tailwind-csstiptap