Create a horizontal scrolling div with a fixed position

Even though this topic has been discussed numerous times, I have not found any solutions that work for me. My webpage has a sidebar on the left with position:fixed in CSS, and I want it to scroll horizontally along with the rest of the content.

For the header and footer, I used the following solution:

 $(window).scroll(function ()
{
    $("header,footer").css('margin-left', -($(window).scrollLeft()) + "px");
});

However, this approach does not work properly for the sidebar. Here is the HTML for my sidebar:

<div class="fullscreen_block hided">
   <div class="left-sidebar-block">

And here is the CSS:

.left-sidebar-block { 
position: fixed; 
margin-left: 70px;
}

Can someone please help me fix this without using the above JavaScript code? I am open to using other JavaScript, CSS, or jQuery solutions.

Thank you!

javascripthtmlcss

Answer №1

Initially, it seems like utilizing the scrollTop rather than the scrollLeft would be more appropriate for your scenario. Based on your explanation, it appears that you want an element to move horizontally as the user scrolls vertically. The scrollTop provides information about the scrolling distance.

Furthermore, I suggest utilizing the transform attribute instead of the margin attribute, provided that it is compatible with the browsers you are targeting. Implementing scrolling effects can be resource-intensive, so opting for high-performance CSS properties like transform and opacity over slower properties such as margin, left, and display is advisable.

The following code snippet accomplishes what I believe you are aiming for. (View the Codepen demonstration: http://codepen.io/username/pen/uniqueid):

$(window).scroll(function ()
{
    var top = $(window).scrollTop();
    $("left-sidebar-block").css('transform', 'translateX(' + (-top) + "px)")
                      .css('-ms-transform', 'translateX(' + (-top) + "px)")
                      .css('-webkit-transform', 'translateX(' + (-top) + "px)");
});

Additional Resources

http://css-tricks.com/almanac/properties/t/transform/

http://caniuse.com/#feat=transforms2d

Answer №2

It appears that the issue you're facing is a bit unclear. Perhaps focusing on adjusting the "left" attribute instead of "margin-left" would yield better results. Margins may not impact a fixed element in the way you intend.

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

Exploring the JSON object tree through recursion using underscore and backbone

If I have a JSON object with nested arrays of unknown depths and I want to pass each array into a _.template function, how can I make that happen? Here's an example of what my JSON object might look like: $start_elements = array ( array( ...

javascriptjquerybackbone.jsunderscore.js

What is the best method for showcasing various content using a uniform accordion style in React?

What is the most efficient way to display various content within multiple accordions? view image description here This is the current approach I am taking in my project, where shipping information and delivery options will involve different textboxes, labe ...

javascriptcssreactjstwitter-bootstrap

On Internet Explorer 9, the window.open function is causing a new window to open up with

I am having an issue with redirecting my form to another page in a new window using window.open(). The problem I'm encountering is that when the new window opens, it appears blank and the original browser window redirects to the intended page for the ...

javascriptjqueryinternet-explorerwindow.open

Why is it important to understand the meaning of variable = [...variable] in Javascript ES6?

I need clarification on the following variable arg assignment arg = [...arg]; Can you explain what this code snippet does? ...

javascriptecmascript-6

What causes the values to constantly change whenever I insert an element into the array?

When I add an element, it automatically replaces all the others. This issue only occurs when I insert the entire object; if I insert a typical element such as an integer or a string, it works without any problems. <body> <div id="app&quo ...

htmlvue.js

Generating a chart using solely the existing data components (values)

I have the following arrays: const elements = ['12345', '12346', '12347', '12348', '12349', '12350']; const fruits = ['Apple', 'Ball']; I want to create a Map using array ele ...

javascript

Creating custom modals for individual elements using PHP

Currently, I am working on a project that involves allowing users to select an item from a list retrieved from a MySQL database. The goal is to have buttons generated based on the selected item, shown below: https://i.sstatic.net/Oi5CG.png Here is a trim ...

javascriptphpjqueryhtml

Aligning an SVG within a container div

I am trying to display an SVG image inside a fixed-position div. Here is the HTML: <div class="main"> <svg class="svg" viewBox="0 0 180 100"> <rect height="100%" width="100%" fill="#003300"></rect> </svg> </div> ...

htmlcsssvg

Utilizing a third-party API within the next/api endpoint

I've recently started working with NEXTJS and developed a weather application. I'm integrating the openweather API, but I'm unsure how to use it within the next/api. I attempted creating a file named today.js inside the next/api directory an ...

javascriptreactjsapinext.jsopenweathermap

js The correct value is not being set to the div's style.top

function gamestart(){ var gr; var gr = true; console.log(gr==true); if(gr == true){ console.log("we have activated pointer key detection dear Mr.ketsebaot") document.onkeydown = checkk; } } function checkk(e){ cons ...

javascripthtmlcss

Using Node.js to extract text from a local file on Azure using OCR technology

I recently started using the Azure OCR Service to extract text from images (https://learn.microsoft.com/de-de/azure/cognitive-services/Computer-vision/quickstarts/javascript#OCR). While things have been going smoothly so far with uploaded images, I am now ...

javascriptnode.jsazureocrazure-cognitive-services

Inserting information into an array: Access the final index consistently with TypeScript

I am interested in dynamically creating a table by allocating it, with the variable nbrBoules: boules:Boule :[] boule:Boule; Boule{id,poids} Method(){ for (var _i = 0; _i < this.nbrBoules; _i++) { this.boule.id = _i; alert(_i); this ...

javascripttypescript

What is the best way to customize arrow designs in a React Slick Slider?

I am struggling to customize the arrows in react-slick with my own PNG images. Despite my efforts, the images appear distorted on the screen as they are automatically set to a width and height of 20px instead of their actual size of 17x27px. I have experim ...

cssreactjsnext.jsslick.jsreact-slick

A guide on enabling or disabling a combobox in vuejs3

In VueJs 3, I am looking for a way to toggle the Disable/Enable status of a combo-box based on a specific property. Below is my code snippet: <template> <div class="combobox"> <label for={{selector_name}}> <p> ...

javascriptvue.jscomboboxvue-componentvuejs3

Struggling to retrieve JSON response through Javascript

It seems there may be an issue with the API URL or headers in the code provided below. The isError function is always triggered, indicating a lack of response. However, testing the same API URL in Postman returns a successful response. Code: //loading Fl ...

javascriptajax

Angular JS allows you to easily remove the # symbol from a URL, improving the

I am encountering a problem with the "#" symbol in my angular js website's URL. I need to remove the # from the URL but the method provided isn't working and the site is not displaying properly. Can someone advise me on how to successfully remove ...

javascriptangularjsroutes

Storing JSON data in list items within an HTML document using React

I am currently working on creating a component that can provide auto-suggested values from an online API and then send the value and its associated JSON data back to the parent component. So far, I have successfully implemented a feature that generates a ...

javascriptjsonreactjs

Styles created using makeStyles in MUI are no longer working properly following an update to both MUI and React versions

Implementing the MUI Dropdown in a components library. When testing the library in Storybook, everything functions properly. However, when integrating the component into a separate React project, the layout becomes distorted. The Dropdown label is posit ...

cssreactjsnpmmaterial-uimakestyles

I find it impossible to avoid using the withRouter and withAlert functionalities in Reactjs

When using withRouter, the alert.success property is not accessible. A TypeError is thrown with the message "Cannot read property 'success' of undefined". This issue prevents the successful display of alerts in my application. The error occurred ...

javascriptreactjsredux

Building a bridge between React Native and MongoLab

I am currently in the process of developing a React Native application for iOS that will require querying a database. After some research, I have chosen to use MongoLab. Upon reviewing MongoLab's documentation, it is suggested to utilize the MongoDB D ...

javascriptnode.jsmongodbreactjsreact-native