Continue scrolling through both columns until you have reached the final element

I am looking to develop a feed page that mirrors the format of LinkedIn. I envision two columns placed side by side, with the first column containing numerous elements and the second column having fewer elements. As the user scrolls, both columns will scroll together. However, once the bottom-most element is reached, it will stay in view. Subsequent scrolling will only affect the elements in the first column. Additionally, when scrolling up, the second column will also move upward.
I intend to achieve this functionality using Angular and Typescript. Attached below are some reference images.
https://i.sstatic.net/ofXifm.png

https://i.sstatic.net/Xjc5Tm.png

https://i.sstatic.net/p1RiNm.png

Edit:
I am exploring the use of Bootstrap rows and columns for this layout.

<div class="row">
    <div class="col-8">
        ...
    </div>
    <div class="col-4" style="position:fixed;">
        ...
    </div>
</div>
htmlcssangulartypescriptbootstrap-4

Answer №1

Utilize position: sticky; bottom: 0 for the second column. Here is a simple example:

.col2 { position: sticky; bottom: 0; margin-left: 50px; }
<div class="container">
  <div class="col1">
    <p>col 1</p>
    <p>col 1</p>
    ...
    <p>col 1</p>
  </div>
  <div class="col2">
    <p>col 2</p>
    <p>col 2</p>
    ...
    <p>col 2</p>
  </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

Vue.js and Bootstrap - The Collapsing Effect

I am currently facing an issue while working with Bootstrap 5.1 or 4.6 as well as Vue.js 2. The functionality I am trying to implement involves clicking a button that triggers a collapse function. Below is the code snippet from my first Vue component: &l ...

bootstrap-4vuejs2bootstrap-5

Preventing Multiple Login Attempts in Angular.js Using Typescript

Is there a way to maintain the user login attempts limit even after page refresh? login() { /* Check if user has fewer than 5 failed login attempts */ if (this.failedAttempts < 4) { this.auth.login(this.credentials).subscribe(() => { this.rou ...

javascriptangularjstypescriptmean-stacklogin-control

The Observable Map is unable to be cast to a typescript class

I am currently utilizing Angular 2 and attempting to make a request to an endpoint in order to retrieve a collection of objects. Here is the TypeScript class that I am working with: export class Route { public branchId: number; public branch: str ...

angularrxjs

Encountering Vue linting errors related to the defineEmits function

I am encountering an issue with the linting of my Vue SPA. I am using the defineEmits function from the script setup syntactic sugar (https://v3.vuejs.org/api/sfc-script-setup.html). The error messages are perplexing, and I am seeking assistance on how to ...

javascripttypescriptvue.jseslintvue-composition-api

Verify the information retrieved from the JSON document

I have a JSON file containing 10 records, and I am continuously adding these records to a list as the page is scrolled. This results in the data being appended dynamically. My goal is to stop appending more data once all the records from the JSON file hav ...

jqueryhtmljson

"RxJS in Angular 2: The elusive map function seems to be missing

Issue: Received an error stating, "Property 'map' does not exist on type 'Observable'." import { Component } from '@angular/core'; import { Http } from '@angular/http'; import 'rxjs/add/operator/map'; decl ...

angularrxjs

Calculating the total number of days in each month within a specified date range using PHP in a dynamic way

Thank you for taking the time to help me with my issue. For instance, if a user selects a date range from 10 Dec 2016 to 20 April, how can I calculate the number of days for each month within that range? For example, Dec=22 Days, Jan=31 Days, Feb=28 Days, ...

javascriptphpjqueryhtmlcss

Can someone explain why the index call is not reaching the "/" route in Node.js?

When I access the server by going to http://localhost:3000, it displays my index file but does not route to the get function in index.js. I am currently stuck at this point. Below is my app.js file: var express = require('express'); var path = ...

javascripthtmlnode.jsexpressrouter

Scrollbars cannot be added because the content adjusts to the height of the screen automatically

I am currently working on centering the boxes within my design, which I want to occupy 80% of the height of their parent component. One issue I am facing is that when I adjust the height of the browser window, the content inside the boxes also changes its ...

cssreactjsflexbox

Is there any benefit to making the SVG elements width and height 100%?

The Angular Material documentation app features an SVG Viewer that is able to scale the SVG content to fit the container using the following function: inlineSvgContent(template) { this.elementRef.nativeElement.innerHTML = template; if (this.sca ...

javascripthtmlcssangularsvg

The interface 'children: string' does not share any properties with the type 'IntrinsicAttributes'.ts(2559)

When I export the component, the value from the input email does not appear as a VALUE property. How can I collect the text written in this exported component in my code? NOTE: I am working on developing a design system using STORYBOOK. export const Login ...

javascriptreactjstypescriptnext.jsfrontend

Nested Callbacks

My goal is to trigger a callback function after another one finishes, but currently they all seem to be executing at once. Below is the code snippet: $('video#videopromo').bind('ended',function() { $("#hero").fad ...

jqueryhtmlcallbackfadeinjquery-callback

The variable 'key' is declared in the Google Chrome extension V3 local storage, but it appears that its assigned value is never actually accessed

In my TypeScript code, I have defined a function like so: setLocalStorage: async (key: string, value: string): Promise<string> => { return new Promise((resolve, reject) => { chrome.storage.local.set({ key: value }, funct ...

typescript

Utilize the mailto function in HTML to dispatch an email

I am utilizing an Android hybrid app that includes a link for sending emails: <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dcafb4aeb5b7bdb2a8b6bdb8b4bdaae4ea9cbbb1bdb5b0f2bfb3b1">[email protected]& ...

androidhtmlemail

Utilizing MySQL Data in an Angular 2 Front-End Component within an Electron Desktop Application

Being new to Electron, this is my first attempt at creating a desktop app. One section of the application simply displays current forecasts based on customer data retrieved using standard database queries. I've opted to use a local MySQL database to ...

mysqlnode.jsangularelectron

Designing a horizontal slide banner with enhanced functionality

I am working on displaying a vertical banner that slides out horizontally from the right side of the screen when the user clicks on the open button/div, and also has the ability to close it. The basic design concept is illustrated in the sample image below ...

javascriptjqueryhtmlcss

Circular dependency in Typescript/Javascript: Attempting to extend a class with an undefined value will result in an error,

Query Greetings, encountering an issue with the code snippet below: TypeError: Super constructor null of SecondChild is not a constructor at new SecondChild (<anonymous>:8:19) at <anonymous>:49:13 at dn (<anonymous>:16:5449) ...

javascripttypescriptcircular-dependencyfactory-pattern

The jQuery attr() method is universally compatible across platforms and stands independent

I have a jQuery statement that is currently working for me, but I am unsure if it is cross-platform independent. Can anyone confirm? $("input[name='confirmed']").attr("checked",false); It is functioning correctly on the latest version of Firefo ...

jqueryhtmlcssdhtmlattr

Utilizing CSS3 to implement multiple backgrounds across various selectors

My goal is to set backgrounds in two different CSS classes, ideally utilizing CSS3's multiple background feature. I aim to achieve this with minimal markup and ensure it is universally applicable. For example: CSS .button { display: block; } . ...

htmlcss

Require checkboxes in AngularJS forms

Currently, I have a form that requires users to provide answers by selecting checkboxes. There are multiple checkboxes available, and AngularJS is being utilized for validation purposes. One essential validation rule is to ensure that all required fields a ...

javascripthtmlangularjscheckbox