I'm attempting to create something similar to the layout seen on:
The desired effect is to have fixed content on the right side, with only the left side scrolling up to a certain point before the entire page scrolls normally. However, in my implementation, when I scroll down on the right div, the content also moves. Is there any way to achieve this behavior using JavaScript (I suspect that is how it's done)?
Cheers
To create a sticky element with CSS3, refer to the snippet provided below.
Remember to keep the following in mind:
Ensure cross-browser compatibility - this task is your responsibility.
You may need additional CSS for responsiveness.
Best of luck!
#mainContainer {
width: 100%;
height: 1200px;
background-color: yellow;
}
#stickyElement {
background-color: orange;
position: sticky;
width: 50%;
height: 150px;
top: 0px;
}
.sideItems {
margin-left: 50%;
width: 180px;
height: 180px;
margin-top: 10px;
margin-bottom: 10px;
background-color: purple;
}<div id='mainContainer'>
<div id='stickyElement'>
</div>
<div class='sideItems'>
</div>
<div class='sideItems'>
</div>
<div class='sideItems'>
</div>
</div>
<div class='sideItems'>
</div>
<div class='sideItems'>
</div>
<div class='sideItems'>
</div>
<div class='sideItems'>
</div>If you want to make an element stay fixed on the page, you can achieve it by setting the css property position to fixed:
#fixedDiv{
position:fixed;
background-color:red;
top:100px;
left:200px;
width:50px;
height:50px;
}
#backgroundDiv{
background-color:yellow;
width:100%;
height:1000px;
}<div id="fixedDiv">
FIXED
</div>
<div id="backgroundDiv">
NOT FIXED<br>
1<br>
2<br>
3<br>
4<br>
5<br>
6<br>
7<br>
8<br>
9<br>
10<br>
...
20 more lines
</div>To control the position of the fixed element, you can use the properties top, left, right, and bottom to specify its distance from the sides of the page.
The website currently utilizes this css property along with javascript to dynamically change the position when scrolling down the page.
My current project is built on CI3 and I have created an API that belongs to a different domain than the application itself. $.ajax({ url: "http://www.example.com/restapi/index.php/api/user", type: "GET", data: {"user_id": user_id} ...
Scenario After coming across a thought-provoking XKCD comic, I decided to craft a script that would bring the comic's concept to life: javascript:var a=document.getElementsByTagName('body')[0].innerHTML;a=a.replace(/Program(\w\w+ ...
I have been troubleshooting this issue by referring to similar posts, but I am still facing the problem of getting 'undefined' when using console.log. I have followed instructions for defining the multer middleware from other sources, so I am uns ...
I am a beginner when it comes to JS, TS, and Angular, and I have encountered an issue with an Angular component that I am working on: export class AdminProductsMenuComponent implements OnInit{ constructor(private productService: ProductService, ...
Below is a jQuery example where an element should be hidden, but it's not working as expected: <html> <head> <script src="../lib/jquery-1.7.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $ ...
Seeking assistance with a coding issue. I am puzzled as to why I am unable to utilize the data returned from an API call outside of its function, even though there are no errors occurring. The fetchUser function successfully retrieves the data from the API ...
Here is the code I have created to display a simple drop down list: var products = [ { "id": 1, "name": "Product 1", "price": 2200, "category": "c1" }, { "id": 2, "name": "Product 2", "p ...
For reference, please take a look at the table screenshot: I am attempting to remove a row from the table using the corresponding Delete Asset button (meaning deleting all rows in a django model with Symbol: 1INCHUP) The strategy I have in mind is that t ...
I need to fetch an array of elements structured like this: ApiResponse = [ {_id: 1, name: Mike, transactions: 5}, {_id: 2, name: Jhon, Transactions: 10} ] The user data is retrieved from a query on the "Users" schema, while the tr ...
After putting my stylesheet through the CSS validator at W3C, I encountered only one error which read "Parse Error Opacity=60". The issue seems to be in this specific part of the CSS code: /*Navigation Link styling */ #Nav a:link, a:visited { display: inl ...
Looking for a bit of assistance with an array transformation: [ {Code:13938, Country:699, Name:"Crocs", codeProduct:1} {Code:13952, Country:699, Name:"Polo Club", codeProduct:14} {Code:13952, Country:699, Name:"Polo Club", codeProduct:1} {Code ...
Is there a way to keep a part of the screen fixed, regardless of what other elements are in that space? Do I need to merge code with the HTML code of the ad or image to achieve this? ...
I've been grappling with setting up vue-router's $route in my shims.vue.d.ts file to avoid getting an error on the this scope. Whenever I try to access this.$route.params.paymentId, I keep receiving a type error: TS2339: Property '$route&apo ...
I found a code snippet on https://www.w3schools.com/howto/tryit.asp?filename=tryhow_custom_select that demonstrates a custom select input with an onchange event. However, I am facing an issue where the onchange event does not get triggered when I change th ...
Hey there, I have a question that may seem silly, but I am struggling to find a solution on my own. Unfortunately, my CSS skills are not the best :( I'm trying to achieve the following layout where the text should wrap at the end of the container (di ...
I'm facing an issue while trying to incorporate the chess.js npm library into my Create React App. The error message "Chess is not a constructor" keeps popping up. Below is the code snippet I am using: import React from 'react'; import &apos ...
I am attempting to utilize chart.js (newest version) to generate a pie chart. I have constructed an array that I intend to use as the data input for the chart. This is the PHP code snippet: <?php if($os != null) { $tiposOs = array('Orçamento ...
With php, I am looking to dynamically change the background color of a td based on the number within it. While this can be achieved using CSS by assigning different classes to each td with specific colors, I prefer a more straightforward method for mainten ...
I'm struggling to set a backgroundImage because it's not recognizing the local path URL. Here is my code snippet: import { makeStyles } from '@material-ui/core/styles'; const loginWrapperStyles = makeStyles(theme => ({ image: { ...
I have encountered this JSON structure and I am interested in extracting the value of "resource_uri" which is "/api/v1/client/2/". My implementation revolves around Backbone/javascript. Unfortunately, using json['resource_uri'] does not produce ...