Ensure that the Div element remains visible on the screen while contained within a

Is there a way to maintain the position of elements on the right side of a div without using position: fixed, while still keeping the div within its parent container? See the desired layout. I need the "Stays in view" element to stay within its parent div and remain visible on the viewport.

I have experimented with using position: fixed, but it becomes difficult to prevent overlap with other elements when dealing with multiple viewports and it can cause the element to leave its parent container.

A big thank you to Parth M for the assistance. Your recommendations have helped improve the situation. See the latest update.

htmlcss

Answer №1

To achieve a sticky element, use position: sticky;

.left_col{
  width:25%;
  background:linear-gradient(to bottom, red, orange);
  height:2000px;
  margin-right:20px;
    float:left;
}

.right_col{
  width:calc(75% - 20px);
  background:grey;
  height:2000px;
  float:left;
  position:relative;
  display:flex;
  padding:20px;
  box-sizing: border-box;
  justify-content: space-between;
}

.left_content{
  height:100%;
  width:48%;
   background:linear-gradient(to bottom, yellow, orange);
}

.right_content{
  width:48%;
  height:200px;
  background:green;
  position: sticky;
  right:0;
  top:20px;
}
<div class="left_col"></div>

<div class="right_col">
    
  <div class="left_content"></div>
  <div class="right_content"></div>
  
</div>

Answer №2

Utilizing the property position: sticky on the .sticky element causes it to adhere to the top of its parent .sidebar when scrolling occurs within the .container.

By specifying top: 0;, you are instructing the element to stick to the top of the container. This value can be modified to alter where the element sticks relative to the viewport.

The use of position: relative; on the .sidebar ensures that the sticky element remains within the boundaries of the .sidebar during scrolling.

.container {
    display: flex;
    height: 200vh;
}

.content {
    flex: 1;
}

.sidebar {
    width: 200px;
    position: relative;
}

.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background: lightgray;
    padding: 10px;
    border: 1px solid #ccc;
}
<div class="container">
    <div class="content">
        scrollable child
    </div>
    <div class="sidebar">
        <div class="sticky">
            Stays in view
        </div>
    </div>
</div>

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

Asynchronous JavaScript function within a loop fails to refresh the document object model (DOM) despite

I have been working on a function that utilizes ajax to retrieve instructions from a backend server while the page is loading. The ajax code I've written retrieves the instructions based on the number provided and displays them using the response.setT ...

javascriptjqueryhtmlajaxdom

Tips for managing a fixed-positioned element during scrolling and zooming events

I have a situation where I need a fixed-position element to stay at the top-right corner of the viewport. Here is the HTML code: <div class = "header"> <p>This heading has an absolute position</p> </div> And here is the CSS: .he ...

javascriptjqueryhtmlcss

Creating multiple unique custom attributes for a specialized HTML element

Creating getter/setter methods for a custom attribute on a custom HTML element is quite simple: customElements.define('custom-el', class extends HTMLElement { static get observedAttributes() { return ['customAttr'] ...

javascripthtmlecmascript-6web-componentcustom-tags

Emphasize a checkbox by selecting it when another checkbox is checked

I have a question about checkboxes and highlighting the checkmarks. The issue I am facing is that I have multiple checkboxes with the same ID for different screen resolutions. When I click on the label for "Check 1" it highlights the corresponding checkmar ...

javascripthtmlcss

Is there a way for me to scroll and bring the block up to the header when the button is clicked?

My goal is to create a functionality where clicking on the button with the class .booking__button will smoothly scroll the block up under the header. The position of the block should remain consistent, only the scrolling effect should be visible to the use ...

javascripthtmlcss

SWI-Prolog and the Selection drop-down element in HTML

Is there a way to convert this code into SWI-Prolog? I couldn't find any information online on how to write the select statement in Prolog. Can you also provide guidance on making the PHP code function properly within the context of SWI-Prolog? <s ...

phphtmlprolog

The select2 option seems to be malfunctioning as it is not

I have implemented a dropdown using Select2. Although I am able to retrieve data from the backend and display it successfully in Select2, I'm facing an issue with certain data that contains multiple spaces between words. For example: Test&nbsp;& ...

javascriptjqueryhtmljquery-select2

Achieving a layout of three columns and two rows (1 x 2 x 2) using flexbox

I am looking to achieve a specific layout using Flexbox. While I am comfortable with CSS, I want to challenge myself by learning how to implement this design using Flexbox for more concise and maintainable code. https://i.stack.imgur.com/QDVfT.png .ban ...

htmlcssflexbox

What is the best way to make my input tags move downwards when resizing the screen?

I need help with a grid layout. My goal is to have the input tags (marked in blue) shift below when resizing the browser or viewing on a mobile or tablet device, while keeping the other three tags on the same line. I attempted to position the small box to ...

htmlcsscss-grid

Incorporating a hyperlink into an HTML submit button

Recently, I started working with MySQL and decided to create a basic registration page. However, upon clicking the submit button, I would like to be redirected to another page, possibly a login page as seen on many websites. I am struggling with figuring ...

phphtml

Tips for using various versions of jQuery at the same time

Despite searching on Stack Overflow, none of the answers provided seem to work for my issue. My requirement is to utilize two separate versions of jQuery. Below is the code snippet: I first link to the initial version and use the following code: <sc ...

javascriptjqueryhtml

Placing two parent flex containers on top of each other

I'm in a situation where I have two .container elements, both set at a height of 50%. Within these containers are the child divs .element, which belong to their respective parent divs .container. The problem arises when applying media queries with f ...

htmlcss

Create a dynamic animation effect for the placeholder in an input field that triggers when the user starts typing

Have you ever come across interactive demos like this one? I've noticed that most examples involve creating a new element. parent().append("<span>" + $input.attr('placeholder') + "</span>"); Is there a way to make the placehol ...

javascriptjqueryhtmlcss

What is the simplest method for transferring data to and from a JavaScript server?

I am looking for the most efficient way to exchange small amounts of data (specifically just 1 variable) between an HTML client page and a JavaScript server. Can you suggest a script that I can integrate into my client to facilitate sending and receiving d ...

javascripthtmlnode.jsclient-server

Making a JavaScript script compatible with select drop down menus that can handle multiple selections

After searching through various sources, I came across two threads that address my question regarding the code to use. Despite finding solutions, I am struggling to understand how to implement the script. My limited experience with JavaScript is likely cau ...

javascriptjqueryhtml

When the CSS grid is equipped with a sticky left column, it will horizontally scroll if the grid's width exceeds 100% of its containing element

I am facing an issue with a CSS grid layout that has sticky left and right columns as shown below: .grid { display: grid; grid-template-columns: repeat(10, 200px); } .grid > div { border: 1px solid black; background-color: white; } .sticky- ...

htmlcsscss-grid

Exploring the functionality of the PageIndicator for Wearable Technology

Exploring the Page Indicator within a Tizen Wearable Application for Gear S3 Frontier has been an interesting journey. Despite successful implementation with text content, adding controls to each section or incorporating background images has proven challe ...

htmlcssswipetizentizen-web-app

Tips on utilizing CSS modules in React without changing class names

After starting to use css modules in my react project, I quickly realized the struggle of changing classnames to fit the requirements of css modules. For example, if we have a component using regular css: import React from 'react' import ". ...

javascriptcssreactjs

Before beginning my selenium scripts, I need to figure out how to set an item using Ruby in the browser's localStorage

Before running my selenium scripts, I am attempting to store an item in the browser's localStorage. I attempted to clear the local storage using this command: driver.get('javascript:localStorage.clear();') This successfully cleared the lo ...

javascriptrubyhtmlselenium-webdriver

When taking a vertical picture on my iPhone, my Vue component does not function properly

Having trouble with displaying recently uploaded images on a form. If the image is taken from a phone, it may have an exif property that browsers do not handle correctly, causing the picture to appear flipped or sideways. Upside down photo To fix this is ...

javascripthtmlcssvue.jsexif