Position fixed with lengthy sidebar content

I have a website with a sidebar that is longer than one browser 'screen'. I am looking for a solution where:

  • as we scroll down the page, the sidebar also scrolls as if it were in a static position
  • when the bottom of the screen reaches the bottom of the sidebar, it starts to stick and drag along (sidebar's position fixed to the bottom)
  • after dragging it for some time, when scrolling up, it should again scroll like a static position
  • when the top of the screen reaches the top of the sidebar, it should start to move up with us until it returns to its starting point and remains fixed at the top

I've searched for solutions and tried using jQuery, but nothing has worked for me. Any suggestions on what else I could use?

Link:

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

Understanding the float feature in CSS

Why is there an empty space to the left of the image in my code section? #features{ background-color: #f9f6f7; } .featuresimg{ width: 40%; float: left; } <section id="features"> <img class="featuresimg" src="https://via.placeholder.com/ ...

Utilize a CSS style or class on a div element

Looking for a way to style alternate div elements within a parent div? Check out this example: <div id="comment"> <div id="m1">...</div> <div id="m2">...</div> </div> I tried to use some jQuery to add a CSS c ...

Disable multiple buttons at once by clicking on them

What is the best way to disable all buttons in a menu when one of them is clicked? Here is my code: <div class="header-menu"> <button type="button"> <i class="fa fa-search" matTooltip="Filter"& ...

The CSS styles within the GridView are not appearing on the page after an AJAX update

In the context of a gridview, I have implemented a CSS-based inline graph. Initially, everything functions as expected until a filter is applied and the gridview undergoes an update. At that point, the CSS styling ceases to apply within the grid. Has anyon ...

Remove the option to select specific minutes from the time input on an HTML

My HTML code includes a time input that looks like this: <input id="appt-time" type="time" name="appt-time" value="13:30" /> I want to figure out how I can remove the minutes from the input or ensure that the ...

Retrieve the most recent update timestamp of a file stored on a distant server

Is there a way to use curl to retrieve the last modified date of a file on a remote server? I'm looking for some guidance on how to accomplish this. ...

Customize CSS for Vimeo's HTML5 player

Can I customize Vimeo's HTML and CSS attributes? I have a video that autoplays and I don't want the play button. I want to modify this specific class. .a.l .b .as { position: absolute; top: 50%; left: 50%; margin: -2em 0 0 -3.25em; float: none; ...

Sending a JavaScript variable to PHP and retrieving the PHP result back into a JavaScript variable

I am looking to transfer a JavaScript variable to a PHP file using AJAX, and then retrieve the PHP file's output back into a JavaScript variable. For sending the JavaScript variable to the PHP file, I found a method that suggests using ajax to assign ...

Cascading autocomplete has encountered an error with the selected word or has not been chosen

I am facing an issue with my autocomplete input box. The problem is that when I select an option from the dropdown, the code only captures the text I typed in and not the selected entry. For example, if I type "TE" and the dropdown shows "TEST" and "TESTS" ...

Position the title of the Bootstrap selectpicker field to the right

I utilized Creative Tim's Material Dashboard Pro to create a select field. My goal is to align both the select field and its options to the right. Currently, I have only been successful in aligning the options while the title and selected option rema ...

A guide on extracting JSON data embedded within an XML document

<?xml version="1.0" encoding="utf-8"?> <string xmlns="http://s.com/webservices/">{ "Status": "0", "UserID": "2", "SessionTimeOut": "10", "TestList": [ { "PlantCode": "01", "PlantName": "Master", "PlantAddr": "Maste ...

Trouble with AngularJs 1.x causing Bootstrap4 menu toggle collapse to malfunction

Issue with Navbar toggle menu not closing properly. I have attempted the solutions provided here and others in an effort to fix this bug. However, none of them seem to work for me. Here is a snippet of my code: <nav class="navbar navbar-expand-lg ...

Table outside Filter Multi

I have incorporated datatables into my website for creating tables. You can check out the tables in action here. Everything is functioning as intended, but I would like to have the multi filters located outside the table. I attempted to create another tab ...

Is there a way to choose a data file in an HTML/JavaScript document for inclusion?

I have created a program for generating graphs, but every time it is executed, the user needs to input a data file to plot. Below is a basic program with the data file (Data.js) hardcoded in line 7: <!DOCTYPE html> <html> <head> &l ...

Having trouble compiling your Vue project and running into the "No mixed spaces and tabs" error?

Below are the details with an error: Error Details: Failed to compile. ./src/components/Header.vue Module Error (from ./node_modules/eslint-loader/index.js): H:\project\VueProjects\stock-trader\src\components\Header.vue 27: ...

When utilizing an API to render text into a div, the offsetHeight function may return 0

I'm working with a div that displays text fetched from an API call. I'm trying to implement a See more button if the text exceeds 3 lines. Here is my approach: seeMore(){ this.setState({ seeMore: !this.state.seeMo ...

Having trouble getting Yii2, Select2, and Optgroup to work together with Ajax

I am currently utilizing Yii2 along with Select 2. I have attempted to implement examples involving optgroup that are loaded through ajax. The browser sends requests, but unfortunately nothing is displayed when I attempt to print the results. Below is the ...

Tips on adjusting an image to fill the remaining height and setting its width

Exploring this particular question along with its chosen solution. I have taken the code from the selected answer and made some adjustments in the code snippet below, replacing #div1 with .header and #div2 with .contents, then placing both divs within a c ...

inefficient performance in linking function within the visual aspect

I am working on an Ionic 4 with Angular app, where I have implemented websockets in my ComponentA. In ComponentA.html: <div *ngFor="let item of myList"> <div>{{ item.name }}</div> <div>{{ calcPrice(item.price) }}</div> ...

Using PHP to dynamically generate and display or hide a div with Jquery

My form is dynamically generated and populated by PHP. Within the form, there is a for loop that repeats based on the number of records in the database. In this section, I have radio buttons where I want to hide one div and show another based on the select ...