We Keep Coding

Is there a way to show scrollbar of an html element side by side another html element using only javascript and css

I am trying to make a basic copy of ms-excel. I want to show scrollbar of the cells' container side by side another html element in which I'll show the sheets.(this sheet container is directly below the cell container.
This is the code : https://jsbin.com/luyolex/edit?html,css,js,output
<div class="grid-cont">
<div class="top-left dummy-box"></div>
<div class="address-col-cont"></div>
<div class="cells-cont">
<div class="address-row-cont"></div>
</div>
</div>
<div class="sheet-actions-cont">
<div class="sheets-folder-cont">
<div id="0" class="sheet-folder">
<div class="sheet-cont">Sheet 1</div>
</div>
</div>
</div>
I want to show the cell scrollbar side by side my "Sheet 1" container like this :
[Sheet 1 ] --Scrollbar--
Thanks in advance

How to move child element inside parent element tracked by mouse position

I want to make an eye which watches to mouse cursor. The pupil of eye should't leaving the "eye" border
I've created some sandbox, which shows example of HTML markup, but I don 't have a formula to make this animation works https://codesandbox.io/s/hardcore-butterfly-grwkz

Check this
i have to type any thing to post this
The base of our challenge consisted of HTML and CSS which constructed the Alien body.
Divs were used to create individual parts of the Alien including the monster, body, ears, mouth, tooth, and eye.
<div class="ufo">
<div class="monster" style="color: #7cb342">
<div class="body">
<div class="ear"></div>
<div class="ear"></div>
<div class="vampi-mouth">
<div class="vampi-tooth"></div>
</div>
</div>
<div class="eye-lid">
<div class="eyes">
<div class="eye"></div>
</div>
</div>
</div>
</div>

image in html hiding under nav bar in header

i have downloaded an html template and it has a banner after the nav bar, i am trying to replace the image banner with my image, i changed it to the same size of the image in the template and added, the html is like below:
<div class="single-creative-shop-banner parallaxBg bg-img" style="max-width:100%; height:auto;"
data-bg="assets/img/home-banner/home_shop_creative_01.jpg">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<div class="creative-shop-banner-content">
<h2>Minimal Collection</h2>
<p class="mb-0">Unlock The Goddess In You</p>
</div>
</div>
</div>
</div>
</div>
the css is so long , not able to post in the question, my website is https://likhaa.com
the problem is when i am adding the banner image, its not properly displaying, instead some part is hiding under the navbar, and the width is also not proper. is there any code in html to fix it or can anyone help me with my code

Please remove the inline margin of 131px from the div having the class "shop-creative-banner" also remove position fixed from the div which is children of div having id "jarallax-container-0"

Can I fix two divs next to each other if other elements are added dynamically to the page?

This is conceptual right now, but I want to do something that feels complicated: place an element (like a <p> so that it is fixed next to another <p>) but still make it responsive if other elements are added to the page.
Here's what I mean. For reference, I am using Bootstrap 4's grid to create two columns. Let's say my HTML was:
<div class="col-md-9">
<h1>Header</h1>
<h3>Ipsum Industries Subheader</h3>
<p>This is the left column text</p>
</div>
<div class="col-md-3">
<p>This is where I want the text to constantly be next to the <p> element in the left column</p>
</div>
Is there any way that I can "nest" this second <p> element to directly next to the left column <p> regardless of other content?
Possible Questions
Why not just use absolute positioning? This is answered a lot, like here, on how to place two divs together. This is different - the reason I am thinking about this is that I am building an application in which Javascript will add elements into that first div. If I use a fixed/absolute location for this second element, it will look jumbled after, say, an <h4> is appended before it.
In short, I want to know if it's possible to create a relationship between elements like this that will work in a dynamic way?
Do you need to use the grid? No, I am using the Bootstrap grid as a starting point, but then I realized this issue with how the positioning will break when a new element is added ahead of the <p>. I can ditch the grid if necessary.

Two suggestions, assuming I am understanding your question correctly.
Option A)
<h1>Header</h1>
<h3>Ipsum Industries Subheader</h3>
<div class="row">
<div class="col-md-9">
<p>This is the left column text</p>
</div>
<div class="col-md-3">
<p>This is where I want the text to constantly be next to the <p> element in the left column</p>
</div>
</div>
Option B)
<div class="col-md-9">
<h1>Header</h1>
<h3>Ipsum Industries Subheader</h3>
<p>This is the left column text</p>
</div>
<div class="col-md-3">
<h1> </h1>
<h3> </h3>
<p>This is where I want the text to constantly be next to the <p> element in the left column</p>
</div>

How to find elements in the active area that is visible on the page using jquery

How to determine elements in the visible region of Div?
There are 2 div within main div.
The wrapper div contains many child div with overflow property.
On scrolling the document div i need to find out the visible
children div in the wrapper.
Below is HTML structure
<div class="main">
<div class="wrapper">
<div class="comment"></div>
<div class="comment"></div>
<div class="comment"></div>
<div class="comment"></div>
<div class="comment"></div>
</div>
<div class="document"></div>
</div>
Is there any possibility for finding the number of visible div in the window?

Try this:
$('wrapperdivselector').find("div:visible");
for length:
$('wrapperdivselector').find("div:visible").length;
Demo

use :visible try this
$('.orginalDiv1>.waprrer div:visible').someCommand()
or
$('.orginalDiv1>.waprrer').find('div:visible').lenght()