What is the best way to incorporate a scrollbar into a stationary sidebar that is only visible when hovered over?

Working on a website, I decided to make the sidebar fixed on the left and set it to extend to the full height of the page with the following CSS:

sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
}

While this keeps the sidebar in place, there is an issue when the page is resized to a smaller height. Only the content at the top of the sidebar is visible, making it impossible to see anything at the bottom.

I am aware that adding overflow-y: scroll; will create a scrollbar, but I am looking to implement a dynamic scrollbar that only appears when the sidebar content exceeds the window height and only appears upon hovering. I also want the scrollbar to have a style similar to the sidebars on websites like TheNextWeb or Facebook chat.

Realizing I will need javascript for this functionality, I must admit my javascript skills are limited. Any assistance would be greatly appreciated.

javascriptjquerycss

Answer №1

overflow-y: auto should definitely do the trick:

When it comes to styling, finding a suitable replacement for the scrollbar is key, especially since scrollbar customization is limited to webkit browsers (http://css-tricks.com/custom-scrollbars-in-webkit/). Fortunately, there are plugins available that can help with this complex task:

These are just a few options available.

EDIT: Thanks to suggestions from sheba, I've made some modifications:

.sidebar:hover{
   overflow-y: scroll;
}

http://codepen.io/johannesjo/pen/GcLFn

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

Undefined Variable Errors

I am attempting to pass the errors variable (in this scenario, it is a fix) from the server to the client so that it can display the errors using the ejs template engine. The errors are listed in the variable through push and I then retrieve them in error ...

javascriptnode.jsexpressejs

Tips for implementing validation in a multi-step form as outlined in w3schools tutorial

I came across a multistep form creation tutorial on w3schools. However, the tutorial only covers generic validation (checking if a field is empty), which is not sufficient for my needs. How can I implement HTML validation (e.g., min, max, length) for text ...

javascripthtmlcssbootstrap-4

Retrieving user input from an angular controller function

I have a $resource object in Angular that looks like this: { _id: '1' items: [ {_id: 'a'}, {_id: 'b'}, {_id: 'c'} ] } My goal is to create a form with a checkbox for each element in the items array. In th ...

javascriptangularjs

Having trouble getting "Hello World" to display in ReactJS

I can't seem to get "hello world" as the output in my code. It's a simple code, but I'm getting a different result when using the createElement function. I'm still new to react and could use some help. Here is the code: <!DOCTYPE h ...

javascriptreactjsjsx

Storing notes using HTML5 local storage

I recently developed a unique note-taking web application where users can create multiple notes and switch between them using tabs on the left side. My next step was to implement local storage for saving these notes, so I inserted the following code: $(d ...

javascriptjqueryhtmllocal-storage

Monitor a nested watch property for potential undefined or default values

Currently tackling an issue in my Vue2 project related to a specific property I'm trying to watch. Here's what the code snippet looks like: watch: { 'car.wheels': function(){ ... } Sometimes, 'wheels' is undefined ...

javascriptvue.jsvuejs2

What is the best way to style radio boxes in HTML to resemble checkboxes and display X's when selected?

I'm looking to create a form with radio boxes that resemble checkboxes and display a glyphicon x when selected. I've experimented with various solutions such as: input[type="radio"] { -webkit-appearance: checkbox; /* Chrome, ...

javascriptjqueryhtmlcheckboxradio-button

Positioning of Responsive Slider

I'm currently working on a responsive website, but I am facing challenges with the placement of the slideshow dots. When I switch to the device toolbar, they seem to change position. I have tried various methods such as using relative and absolute uni ...

javascripthtmlcss

Utilizing the powerful combination of AngularJS and Ionic, leverage the ng-repeat feature to seamlessly insert elements between

There are 2 loops in our code structure. They look like this: <ion-list> <ion-item ng-repeat="pair in items"> <div class="row"> <ion-item ng-repeat="item in pair" class="col-45"> {{item}} ...

javascriptangularjsionic-framework

The use of the jQuery clone() method in conjunction with jQuery TABS allows for the display of cloned fields

I've implemented jQuery tabs with the following code structure: <ul class="tabNavigation" id="tabs"> <li><a href="#AAA">AA</a></li> <li><a href="#BBB">BBB</a></li> </ul> ...

javascriptjquery

I'm unsure of the process for obtaining record IDs when deleting records with jQuery

<script type="text/javascript" src="../js/jquery-1.4.1.min.js"></script> <script type="text/javascript"> $("#submit").click(function (){ var name =$("#name").val(); var mobile =$("#mobile").val(); var email =$("#email").val( ...

phpjquerymysqlajax

jQuery doesn't seem to be generating the desired output, instead it provides the following results

(function() { var a = document.createElement('a'); var mref = 'http://www.someprivatelink.net'; var linkText = document.createTextNode(title1); var title1 = $('#node-264152').find('.audio-description' ...

javascriptjqueryhtml

What is the solution to prevent background-attachment:fixed; from distorting the image?

Looking to create a scrolling background image that doesn't stretch? Typically, using background-attachment: fixed; works, but it's causing the image to stretch and lose positioning capabilities. If you want to see the issue in action, check out ...

htmlcssbackground-imagestretch

Modifying the autocomplete feature to showcase options in a dropdown menu

I have a form that requires country states to be displayed in a dropdown menu. Despite having autocomplete functionality, I am only able to see the response as an array in the console.log when searching for a specific state. I have tried to switch from aut ...

phpjqueryjsonajaxjquery-ui

What is the best way to align a card-body to the right for screen sizes larger than 1280 using Bootstrap

I'm having trouble getting the float classes to work on my Bootstrap cards. Specifically, I want to float a card-img left and the card-body right using Bootstrap cards, but it's not behaving as expected. Can someone provide some insight into what ...

cssbootstrap-4

Is Apache required for running NodeJs?

Recently, I set up a web project on my local machine following a tutorial. With the help of XAMPP, I was able to install MySQL and Apache to run my Node.JS backend. Now, I'm looking into hosting the project on an external server to make it accessible ...

javascriptmysqlnode.jsapachewebserver

Ways to conceal the label without using JavaScript when focusing

I am trying to find a way to hide the label "phone number" when the input is in focus by simply clicking on it. I have attempted using CSS but I need a more effective solution. Please let me know if you can help. <div class="form-row"> ...

javascripthtmlcss

Trouble with selecting inputs within a Div Element

Could you please review the code below and help me understand why I am unable to retrieve the ID of the selected radio buttons using this.id? <div id="pay" class="btn-group" data-toggle="buttons"> <label class="btn btn-primary"> < ...

javascriptjquery

Activate a spinner when a button is clicked within a row of an antd table

I created a table with a column that includes a button like the one below: const columns = [ ... { title: "button", dataIndex: "key", render: (text, record) => { return ( <Button icon={<Del ...

javascriptreactjsnext.jsantd

How can I ensure that VueJS only starts loading data after the initial API call has been completed?

After retrieving data from an API, I populate a form in my component. The challenge I am facing is that the watchers are triggered immediately after populating the initial data. I want them to be triggered asynchronously. Additionally, I need to prevent th ...

javascriptvue.js