A stationary division containing scrollable content

I feel like I'm losing my mind...

Trying to achieve the following: a fixed div that always stays visible on the page. Sounds simple enough, but within this div, I need to add content that will scroll along with the rest of the site. Keep in mind, this content does not have its own scrollbar and should move together with the main window's scrollbar.

I've attempted creating another div inside the fixed div with all the necessary position attributes, but without success so far:

.furosimg {
    position: fixed !important;
    width: 181px;
    height: 200px;
    z-index:9;
    margin: 20px 0px 0px 470px;
    overflow: auto;
}

.furosimg .furosone {
    position: relative !important;
    width: 181px;
    height:900px;
    background:url(../images/topbg.png) center repeat-y;

}

Any advice or suggestions?

Thank you!

Answer №1

Check out this demonstration...simply track the scroll position of the window, document, or body and use it to scroll the fixed element.

DEMO: http://example.com/abc123/

SOURCE CODE

var f= document.getElementById('fi');

window.onscroll = function(){
    f.scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
}

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 Angular *ngFor functionality causing malfunction in Tailwind Elements Select component

Below are my codes for a basic Angular component where I'm utilizing the Tailwind Elemets CSS framework. app.componenets.ts import { Component, OnInit } from '@angular/core'; import { Select, Datepicker, Input, initTE } from "tw-elemen ...

Marker on Google Maps in Dark Mode is not displaying properly

I have integrated a custom map into my website using the npm module called google-map-react. The provided tutorial demonstrates how to implement a basic marker on the map, and you can find it here: . Here is an example of what it should look like: import ...

How can I eliminate excess space at the bottom of the screen when using Bootstrap for CSS?

Struggling to design a basic HTML page with full-page height, but a small gap remains at the bottom, especially when viewed on mobile devices. Can anyone help out? Check it out here I've attempted setting the HTML and body height to 100%, but that has ...

When dynamically adding input data, the serialized array may not successfully pass through Ajax

function SubmitData(){ var postData = $("#xForm").serializeArray(); $.ajax({ type: "POST", url: "mail.php", data: postData, success:function(data){ console.log(data); }, error: function(jqXHR, textStatus, errorThrown ...

Require a more efficient strategy for iterating through lines of input

One of the challenges I'm facing with my form is that it contains 5 input lines. I need to keep any blank lines that are sandwiched between two filled lines, while removing all others. For instance, if the first line is blank, the second line contains ...

Discover how to iterate through an array following a map operation and generate a new array based on conditional statements

data.risk.scatterIndices.investments.map((el: any) => el.name) || [] I have a mapping function that generates an array like this: ["pension","realestate","balance","kupot"] This is the condition I want to use t ...

Adjusting column widths in Material-Table: A guide to resizing columns

I am currently using the Material Table library, recommended by Google Material UI as a top data table library. I am facing some issues related to configuring the width of columns in this library. The column's `width` property seems to be functioning ...

What steps can be taken to handle and proceed with any outstanding AJAX requests in the event a

I am currently working on a script to automatically refresh all CSS/JS files that are marked with the attribute-data when any changes occur on the server side. Initially, I attempted to achieve this using php and jquery/javascript but now I am focusing sol ...

When using jQuery, the script will execute successfully only when running it chunk by chunk in the console, rather than running the

As I tidy up an html page, my main task is to remove anchor tags and keep the text nodes. To achieve this, I am enclosing all text nodes (without any surrounding elements) within the <asdf> tag. Additionally, I am deleting empty elements such as < ...

What is the functionality of the icon `<i>` in Twitter Bootstrap?

After adding an icon to a webpage, I noticed that it replaced the old, semi-deprecated <i> tag and instead used a customized image tag. It almost seems like <i ...> is just a simpler version of <img ...>. I'm curious about how this ...

"An unexpected compilation error (800A03EA) has occurred in the JavaScript syntax during

My computer is facing a frustrating compilation issue with JScript and node. Despite trying various solutions found online, the problem persists. After navigating to CD>PROJECT: npm init successful npm install -g globally and locally installed corr ...

The grunt-bower-task tool seems to be experiencing issues as it removes coffeescript from the bower_components directory and subsequently raises an error

Upon executing grunt bower -v, the output displayed is as follows: The process starts with initialization, followed by reading and registering tasks from various Npm modules. Output includes actions related to copying, parsing, installing dependencies, an ...

Set the height of CSS3 to 100% full

I'm struggling to articulate my question, so please feel free to suggest a better title or guide me in the right direction. I'm working on a website using a mix of HTML5 and CSS3, and I want it to display consistently across various browsers. H ...

An issue occurred during the construction of an angular project: The Tuple type '[]' with a length of '0' does not contain any elements at index '0'

When I run the command ng build --prod, I encounter the following error: ERROR in src/app/inventory/inv-parts-main-table/dialog-component/dialog-component.component.html(5,16): Tuple type '[]' of length '0' has no element at index &apo ...

Can anyone guide me on repositioning material ui tabs to appear below my content and ensuring that the content expands to full height

Is there a way to position the Material UI tabs from Material UI tabs below the content area instead of above it? I am currently using them in my project and would like this specific layout. <md-tab-group> <md-tab label="Tab 1"> Co ...

Opting for pre-selected default data within Material UI's select component

When utilizing the select component in Material UI, I am tasked with passing data as props to set a default selected value. The parent component provides the coursename prop, which can be accessed through this.props.coursename. I want this passed course to ...

Troubleshooting RXjs problems on Heroku deployment

I've encountered an issue with my NodeJS/Angular2 website. It functions smoothly on my local Windows 10 setup, but when I attempt to deploy it on Heroku and access the site, the front-end console in Chrome displays an error message and the site fails ...

What is the best way to include a span within a select option element to display a flag beside each option?

I'm currently working on a dropdown menu that allows users to easily select their preferred language. I'm facing an issue with incorporating flags using https://github.com/lipis/flag-icon-css for each option. Can someone please assist me with thi ...

Enhancing the efficiency of JavaScript code

Imagine you have a web application processing 1,000,000 user logins per hour. and the code below is executed during each user login: if (DevMode) { // make an Ajax call } else if (RealMode) { // make another Ajax call } else { // Do something ...

Detect mouse movement exclusively for the left button

Is there a way in jQuery to ensure that a mousemove event is triggered only when the left mouse button is held down, and stops as soon as the button is released? ...