If you fix a block with jQuery

If you fix a block with jQuery - javascript

$(function(){
$(window).scroll(function () {
var scrollVal = $(this).scrollTop();
var adscrtop =$(".header").offset().top
// 在 RWD 767以下不作動
if(window.screen.width>767){
if(scrollVal> adscrtop){
$(".banner").css({"position":"fixed","top":"60px"});
}else{
$(".banner").css({"position": "static"});
}
}
});
});
.header{
max-width:768px;
margin: 0 auto;
}
.nav{
position: sticky;
top:0px;
width: 100%;
height: 60px;
background-color: #f55c47;
z-index:99;
}
.container{
display: flex;
justify-content:space-between;
}
.main{
position: sticky;
top:60px;
flex:2;
background-color: #9fe6a0;
padding:10px;
}
.banner{
flex:1;
width: 200px;
height: 100px;
background-color: #564a4a;
}
.img{
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">
<div class="nav"></div>
<div class="container">
<div class="main">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem quae maiores, quibusdam doloribus eum excepturi ab fugit dolor vel, est molestiae magni tenetur nihil, non architecto aperiam. Consectetur tempore atque doloribus exercitationem veniam. Quibusdam, odio nisi at similique magnam nobis, voluptates non iste laudantium in quo harum soluta voluptatibus vitae labore modi ullam minima enim placeat nesciunt assumenda perspiciatis cumque! A modi delectus assumenda totam, pariatur harum! Odio adipisci maxime expedita beatae hic vero natus necessitatibus! Error earum at natus nemo! Quae aliquid minima quasi exercitationem eum, iure rerum consequatur ipsa. Optio repellendus quibusdam quia incidunt accusamus beatae ex? Accusantium nam, enim esse fugit repellendus dignissimos amet reiciendis nulla porro quo quis facere unde nesciunt culpa molestias sunt a beatae non ad. Voluptatibus, velit numquam. Adipisci molestiae in commodi non officiis facilis repellendus, doloremque cupiditate dolorum nostrum neque magnam aut asperiores quo nam id optio facere nesciunt praesentium. Repellat provident vero rem, tempore ad possimus accusantium perferendis! Architecto repellendus, error numquam necessitatibus voluptatibus asperiores dolorem eius quos beatae a doloremque velit suscipit perspiciatis nisi in tempora illum quidem? In totam fugit mollitia libero sequi voluptates soluta praesentium dolor nihil! Magnam sunt animi omnis in repudiandae cum laudantium nemo unde nulla necessitatibus mollitia nihil accusantium hic voluptas ab facilis aperiam ipsum, natus suscipit corporis. Alias quidem beatae, dolore et recusandae nisi optio error laboriosam temporibus minima voluptatibus reiciendis ipsam officia expedita totam asperiores at provident? Rerum illo provident vitae asperiores optio. Quas est obcaecati consequuntur accusantium quasi possimus soluta architecto adipisci quisquam. Magni, suscipit, quisquam quasi iure architecto expedita reiciendis vitae nulla consequuntur ex illo. Nobis accusantium et eveniet animi, quibusdam sunt beatae consequatur error, qui impedit rerum exercitationem, nulla cupiditate distinctio? Repudiandae fuga excepturi hic ex unde sequi labore, nulla sapiente, distinctio tempora et, dignissimos fugiat inventore a nemo rerum maiores nihil soluta laudantium eius ipsa accusantium explicabo similique! Atque, iusto ipsam! Sequi, nam, laborum velit repellat perferendis voluptatem reprehenderit, odio commodi blanditiis doloremque corrupti quam in nesciunt! Culpa quam iure vero. Labore error, iure assumenda aliquam ea possimus! Amet aliquam eos maxime? Quos numquam quas similique ex eos tempora magni repellendus praesentium? Ad quae vel labore quisquam quidem aliquam, molestias dolorum pariatur minus cupiditate odio, velit mollitia, deleniti corrupti eius nam, optio ullam impedit amet ducimus dolores architecto, id, quaerat ratione sed quas. Qui eius labore quia maiores adipisci, quos quod omnis veritatis modi fugiat. Et, cupiditate, cumque laudantium rem praesentium error odio veniam, repellat
</div>
<div class="banner">
<img class"photo"src="https://images.unsplash.com/photo-1620706857370-e1b9770e8bb1?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="">
</div>
</div>
</div>
Tonight try using jQuery to fix the brown block under the red block. When scrolling up, only the green block will go up!
The brown area is fixed below the red area, but there are some problems As I scroll up, the brown block goes to the left and goes behind the red block Would you like to help me see which side of my code I have written wrong? Which side did I get wrong? Thank you for watching my question.
PS. My English is not very good, please let me know if there is something wrong with my expression. Thank you. Below is my code`

There is a small mistake here.
Inside your scroll listener, you have written "position": "fixed".
Whereas it should've been "position": "sticky".
$(".banner").css({
"position": "sticky",
"top": "60px"
});
"position": "sticky" automatically makes the element stick at the given position while scrolling.
For more info on CSS Positioning, check this out.
Check the updated snippet
$(function() {
$(window).scroll(function() {
var scrollVal = $(this).scrollTop();
var adscrtop = $(".header").offset().top
// 在 RWD 767以下不作動
if (window.screen.width > 767) {
if (scrollVal > adscrtop) {
$(".banner").css({
"position": "sticky",
"top": "60px"
});
} else {
$(".banner").css({
"position": "static"
});
}
}
});
});
.header {
max-width: 768px;
margin: 0 auto;
}
.nav {
position: sticky;
top: 0px;
width: 100%;
height: 60px;
background-color: #f55c47;
z-index: 99;
}
.container {
display: flex;
justify-content: space-between;
}
.main {
position: sticky;
top: 60px;
flex: 2;
background-color: #9fe6a0;
padding: 10px;
}
.banner {
flex: 1;
width: 200px;
height: 100px;
background-color: #564a4a;
}
.img {
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">
<div class="nav"></div>
<div class="container">
<div class="main">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem quae maiores, quibusdam doloribus eum excepturi ab fugit dolor vel, est molestiae magni tenetur nihil, non architecto aperiam. Consectetur tempore atque doloribus exercitationem veniam.
Quibusdam, odio nisi at similique magnam nobis, voluptates non iste laudantium in quo harum soluta voluptatibus vitae labore modi ullam minima enim placeat nesciunt assumenda perspiciatis cumque! A modi delectus assumenda totam, pariatur harum!
Odio adipisci maxime expedita beatae hic vero natus necessitatibus! Error earum at natus nemo! Quae aliquid minima quasi exercitationem eum, iure rerum consequatur ipsa. Optio repellendus quibusdam quia incidunt accusamus beatae ex? Accusantium
nam, enim esse fugit repellendus dignissimos amet reiciendis nulla porro quo quis facere unde nesciunt culpa molestias sunt a beatae non ad. Voluptatibus, velit numquam. Adipisci molestiae in commodi non officiis facilis repellendus, doloremque
cupiditate dolorum nostrum neque magnam aut asperiores quo nam id optio facere nesciunt praesentium. Repellat provident vero rem, tempore ad possimus accusantium perferendis! Architecto repellendus, error numquam necessitatibus voluptatibus asperiores
dolorem eius quos beatae a doloremque velit suscipit perspiciatis nisi in tempora illum quidem? In totam fugit mollitia libero sequi voluptates soluta praesentium dolor nihil! Magnam sunt animi omnis in repudiandae cum laudantium nemo unde nulla
necessitatibus mollitia nihil accusantium hic voluptas ab facilis aperiam ipsum, natus suscipit corporis. Alias quidem beatae, dolore et recusandae nisi optio error laboriosam temporibus minima voluptatibus reiciendis ipsam officia expedita totam
asperiores at provident? Rerum illo provident vitae asperiores optio. Quas est obcaecati consequuntur accusantium quasi possimus soluta architecto adipisci quisquam. Magni, suscipit, quisquam quasi iure architecto expedita reiciendis vitae nulla
consequuntur ex illo. Nobis accusantium et eveniet animi, quibusdam sunt beatae consequatur error, qui impedit rerum exercitationem, nulla cupiditate distinctio? Repudiandae fuga excepturi hic ex unde sequi labore, nulla sapiente, distinctio tempora
et, dignissimos fugiat inventore a nemo rerum maiores nihil soluta laudantium eius ipsa accusantium explicabo similique! Atque, iusto ipsam! Sequi, nam, laborum velit repellat perferendis voluptatem reprehenderit, odio commodi blanditiis doloremque
corrupti quam in nesciunt! Culpa quam iure vero. Labore error, iure assumenda aliquam ea possimus! Amet aliquam eos maxime? Quos numquam quas similique ex eos tempora magni repellendus praesentium? Ad quae vel labore quisquam quidem aliquam, molestias
dolorum pariatur minus cupiditate odio, velit mollitia, deleniti corrupti eius nam, optio ullam impedit amet ducimus dolores architecto, id, quaerat ratione sed quas. Qui eius labore quia maiores adipisci, quos quod omnis veritatis modi fugiat.
Et, cupiditate, cumque laudantium rem praesentium error odio veniam, repellat
</div>
<div class="banner">
<img class "photo"src="https://images.unsplash.com/photo-1620706857370-e1b9770e8bb1?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="">
</div>
</div>
</div>

Related

How to prevent the scroll bar from appearing when the window pops up?

Hello everyone~ I would like to ask that I am currently making a pop-up window, and I have a problem!
It’s because of the excessive content of the website that scrolls will appear when the pop-up window appears, so when the mouse is scrolled, the text behind it will still scroll.
I am a beginner in programming and I don’t know how to prevent scrolls from appearing. Don't let the content of the rear website scroll?
// 點按鈕彈出廣告
$(function(){
$('.js-btn').click(function(){
$('.js-ad').fadeIn();
});
})
// 點關閉按鈕關閉廣告
$(function(){
$('.js-close').click(function(){
$('.js-ad').fadeOut();
});
})
// 點灰色區域關閉廣告，但是藍色區域不關閉
$(function(){
$('.js-ad').click(function(e){
if(e.target.classList.contains('js-ad')){
$(this).fadeOut();
}
})
})
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.btn {
text-decoration: none;
padding: 30px;
background-color: #ee3f4d;
color: #fff;
border-radius: 8px;
transition: 0.5s;
}
.btn:hover {
background-color: #ea1725;
box-shadow: 0px 6px 2px rgba(0, 0, 0, 0.1);
}
.ad {
position: fixed;
justify-content: center;
align-items: center;
display: none;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
z-index: 99999;
}
.card {
width: 300px;
height: 300px;
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
background-color: #0f7bff;
color: #fff;
border-radius: 20px;
padding: 10px;
line-height: 2;
}
.card .close {
display: inline-block;
text-decoration: none;
padding: 10px;
background-color: #e5f75b;
color: #222;
border-radius: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
點擊出現廣告視窗
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam inventore et reiciendis id commodi vero dignissimos laborum rem. Unde qui nam quia totam ut dolores. Pariatur debitis a eveniet ipsum voluptatum, maxime corporis praesentium nesciunt labore facere culpa voluptate rerum neque laborum perspiciatis. Officiis mollitia, provident ut aliquid incidunt corporis sapiente id. Architecto dicta ipsam neque dignissimos autem cum quae distinctio assumenda, doloribus nulla numquam corporis beatae quidem voluptatum? Vero consequuntur aperiam inventore fugit odio temporibus reprehenderit voluptate maiores. Magni magnam fugit reprehenderit adipisci explicabo, eius, esse odio tempore modi nihil obcaecati dolorem vel ad veniam labore amet molestiae, nostrum eligendi aliquid. Placeat autem, odio nihil consequuntur dolorem expedita fugiat quae accusamus distinctio sit tempora. Fugit, quidem expedita aspernatur ipsum non praesentium ad harum nemo animi aliquid nulla voluptates ducimus laudantium. Ex, nesciunt autem totam et minima, libero a dicta magnam unde ullam repudiandae! Ab quis tenetur beatae reiciendis, omnis quidem dignissimos, mollitia deleniti a eaque, possimus blanditiis impedit eveniet amet distinctio? Eaque veritatis repudiandae voluptatum. Nobis reiciendis rem, provident autem aliquam deserunt voluptatibus, omnis possimus temporibus, sequi dolorum? Doloribus, obcaecati? Quae ut cupiditate iste nesciunt, ratione quod quis porro ea explicabo dolorem vitae deleniti commodi fugiat sit. Recusandae natus hic magnam dolor aliquam deleniti aperiam quisquam iure, voluptates dolorum nam repudiandae similique temporibus, totam, perspiciatis iusto eum nemo? Quibusdam incidunt culpa officia blanditiis unde debitis, dolore cum perferendis veniam, velit eos. Tempore vel modi pariatur eius saepe nihil necessitatibus hic, fugiat minima qui est id at! Ducimus quaerat veritatis adipisci nemo ut quos ipsum hic architecto, incidunt eveniet laborum eligendi, doloribus quod beatae numquam aspernatur quis porro illum qui, magni maiores natus aliquid. Atque, amet. Repellendus odio eveniet nisi, animi voluptates voluptatum maxime quae consequatur deserunt corporis repellat odit maiores provident alias ipsa earum ipsam! Alias deleniti officiis cumque repellat. Voluptates nemo repellendus cumque suscipit veniam distinctio dolor voluptatem rem debitis, consectetur molestias perferendis neque, impedit quam non ipsa. Corporis ipsa laborum iusto quidem commodi, quas corrupti recusandae officiis qui animi, dolores velit eius dicta ratione iure voluptatibus! Unde voluptatibus praesentium animi. Magnam minus illum nulla repellendus, sapiente, repellat earum illo omnis, maxime quia tenetur consectetur pariatur eos sit deserunt corrupti commodi dolores. Dolore impedit optio nemo quis at, nesciunt consectetur harum cupiditate. Nesciunt voluptatum sequi saepe sit omnis ut at vitae neque, beatae consequatur, sunt modi, voluptas doloremque natus. Eveniet, autem suscipit libero molestias iusto velit accusamus accusantium tenetur vel minus nesciunt, enim unde esse officia omnis. Fugiat dolore rem blanditiis necessitatibus qui, sit eaque corporis labore ipsa placeat fugit dolorum dolores assumenda dolor. Velit, a alias dicta fugiat vitae nisi doloremque amet quisquam natus porro asperiores perferendis nobis illum consequuntur veritatis cupiditate suscipit veniam. Praesentium dignissimos ex debitis nihil, numquam earum ad voluptatibus iste pariatur atque repellat consectetur reprehenderit? Nobis quisquam, sapiente consectetur reprehenderit modi doloremque nulla iste veniam esse recusandae facere ab quo officiis, placeat accusantium, aliquid fugit rerum similique voluptate. Dolorum magni quas sequi corporis architecto, dignissimos cupiditate recusandae! Temporibus suscipit at mollitia odio ipsa! Saepe harum odit esse dolores magnam eos rem quo animi laboriosam. Debitis repudiandae laborum, ex dolores natus dolorum! Rerum nam, sunt corrupti voluptatum quisquam debitis pariatur molestias repudiandae consectetur, rem quae inventore saepe vitae dolor. Repudiandae quas laudantium quo dignissimos ad ea illum delectus, dolorum animi culpa. Impedit dolorem expedita soluta quisquam id consequatur quam esse laborum maxime amet, quae ipsum iusto et nihil voluptas aut magnam laboriosam repudiandae, facere optio architecto officia, quidem ex eos. Doloremque saepe praesentium amet deleniti dolor culpa illo itaque quibusdam, quia, iusto id! Blanditiis fuga deserunt perspiciatis similique nisi ea, sed quia ipsum perferendis dolor porro quibusdam explicabo, itaque quam voluptates laboriosam repudiandae commodi a dolore tempora autem sunt vero? In doloremque voluptas quae, possimus ducimus blanditiis maxime laudantium aliquid ex. Dolor ipsam rerum unde asperiores ipsa fugiat eum. Explicabo quos sequi expedita rerum amet suscipit, possimus non illo accusamus, enim praesentium mollitia rem recusandae pariatur sapiente error. Quod in, aliquid aliquam eum sequi nemo sint, enim facilis cupiditate laboriosam incidunt praesentium atque recusandae laborum sapiente ducimus. Aperiam laboriosam distinctio non velit, itaque a illum blanditiis sequi provident architecto? Dolorum quibusdam laboriosam officia asperiores labore exercitationem ipsa animi odit! Rem saepe nobis tempore quis modi, odit quidem odio. Maxime magni animi ipsum enim vitae, eaque omnis eos, perspiciatis soluta architecto iste? Consequatur maxime sed eaque accusamus expedita. Delectus nam perferendis totam? Error labore voluptate maiores esse. Molestiae, laborum eligendi. Tempora est culpa, hic quas nemo iste numquam doloribus sunt qui dolores nostrum odio fugit labore voluptates modi cupiditate laboriosam odit architecto quasi ullam! Quo laudantium modi aperiam dignissimos harum repellendus? Maiores, rerum praesentium dolor, magni eos, provident officia libero aliquid optio architecto repudiandae nostrum deserunt cum earum accusantium nobis itaque commodi facilis. Eius optio vel adipisci nesciunt iste, quae recusandae sint cumque, corrupti, reprehenderit enim quas maiores totam facere illo labore porro sapiente sed ea quod atque quam. Maxime quidem voluptates error sequi ullam! Ipsa, ex incidunt commodi cupiditate exercitationem modi dicta. Assumenda, earum modi eum commodi officiis architecto quibusdam cumque molestias porro sapiente repellat, sequi dolores, voluptatibus odio. Qui dignissimos numquam repudiandae consequatur corrupti. Sit corrupti beatae vel, labore quam, cum aspernatur aliquam minima tempora commodi velit eveniet nostrum neque necessitatibus sunt ea mollitia porro eligendi, fuga possimus veniam quia. Mollitia magnam minima dolorem ex molestias quis esse vel dolore qui, aut commodi quasi aliquam vitae blanditiis in voluptatibus obcaecati consequatur consequuntur ducimus ipsa facilis illum. Vel laboriosam nihil necessitatibus, incidunt cupiditate nisi corrupti ipsam vero velit accusamus, dolore voluptatibus exercitationem atque. Molestiae necessitatibus error sint. Iusto temporibus error voluptas corrupti tenetur dignissimos mollitia similique aspernatur, quas, ipsam iste voluptate? Adipisci vel animi ea, id aspernatur maiores ipsam labore quia perferendis delectus. Debitis autem praesentium quae, nulla sapiente, cupiditate quo iure dignissimos dolores deserunt magni laudantium nostrum facere earum odio accusantium reprehenderit fugit laboriosam. Pariatur rem delectus, perferendis provident distinctio iste tempora cumque! Vero error ab amet praesentium expedita debitis ut, soluta alias dolores ea dolore placeat architecto reiciendis voluptatum totam eaque laboriosam.</p>
<div class="ad js-ad">
<div class="card js-card">
<h2>我是廣告</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, fugiat.</p>
關閉
</div>
</div>
</body>

You can toggle a class in your function that will add an overflow-y: hidden to your body and remove it when you run the fadeOut() function.
NOTE: I changed the elements in the modal as something in your code was breaking the snippit. Prolly the javascript in the a href.
// 點按鈕彈出廣告
$(function() {
$('.js-btn').click(function() {
$('.modal').fadeIn();
// optional to add flex display when faded in
$('.modal').css('display', 'flex')
$(document.body).addClass('no-scroll');
});
})
// 點關閉按鈕關閉廣告
$(function() {
$('.modal-close').click(function() {
$('.modal').fadeOut();
$(document.body).removeClass('no-scroll');
});
})
// 點灰色區域關閉廣告，但是藍色區域不關閉
$(function() {
$('.modal').click(function(e) {
if (e.target.classList.contains('modal')) {
$(this).fadeOut();
$(document.body).removeClass('no-scroll');
}
})
})
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: start;
position: relative;
}
.par {
height: 3000px;
}
.btn {
text-decoration: none;
padding: 30px;
background-color: #ee3f4d;
color: #fff;
border-radius: 8px;
transition: 0.5s;
}
.btn:hover {
background-color: #ea1725;
box-shadow: 0px 6px 2px rgba(0, 0, 0, 0.1);
}
.modal {
position: fixed;
justify-content: center;
align-items: center;
display: none;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
z-index: 99999;
}
.modal-card {
width: 300px;
height: 300px;
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
background-color: #0f7bff;
color: #fff;
border-radius: 20px;
padding: 10px;
line-height: 2;
}
/* added the class to toggle the overflow-y on the body
when the JS function to fadeIn()/fadeOut() is fired */
.no-scroll {
overflow: hidden;
}
.modal-card .close {
display: inline-block;
text-decoration: none;
padding: 10px;
background-color: #e5f75b;
color: #222;
border-radius: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
點擊出現廣告視窗
<p class="par"> Mollitia magnam minima dolorem ex molestias quis esse vel dolore qui, aut commodi quasi aliquam vitae blanditiis in voluptatibus obcaecati consequatur consequuntur ducimus ipsa facilis illum. Vel laboriosam nihil necessitatibus, incidunt cupiditate nisi
corrupti ipsam vero velit accusamus, dolore voluptatibus exercitationem atque. Molestiae necessitatibus error sint. Iusto temporibus error voluptas corrupti tenetur dignissimos mollitia similique aspernatur, quas, ipsam iste voluptate? Adipisci vel
animi ea, id aspernatur maiores ipsam labore quia perferendis delectus. Debitis autem praesentium quae, nulla sapiente, cupiditate quo iure dignissimos dolores deserunt magni laudantium nostrum facere earum odio accusantium reprehenderit fugit laboriosam.
Pariatur rem delectus, perferendis provident distinctio iste tempora cumque! Vero error ab amet praesentium expedita debitis ut, soluta alias dolores ea dolore placeat architecto reiciendis voluptatum totam eaque laboriosam.</p>
<div class="modal">
<div class="modal-card">
<h2>This is a header</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, fugiat.</p>
<button class="modal-close">Close</button>
</div>
</div>

Parallax.js displays expected behavior on desktop and ios devices but not working on android devices

I implemented the tool as per the instructions at https://pixelcog.github.io/parallax.js/ (also watched a YouTube tutorial on it before that). It works perfectly on desktop sites (and shows graceful degradation on iOS devices as expected). However, it does not display the parallax effect on Android devices even after I add the attribute and value data-android-fix="false" to the relevant div element. What could be the reason? (See the table on the page linked above for explanation of how this flag works).
I have tested this on a Nokia 2.2 Android device. Some online emulators of other Android devices also seem to show the same problem. Sharing a code snippet below, please scroll to see the effect. Look forward to your responses!
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>
<style>
.parallax-window {
min-height: 150px;
background: transparent;
display: flex;
flex-direction: column;
justify-content: center;
color: yellow;
border: red 2px solid;
text-align: center;
}
.overlay-text {
z-index: 2;
position: relative;
background: black;
width: 80vh;
margin: auto;
}
</style>
</head>
<body>
<section id="mySection" class="bg-light">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint repellat cum incidunt unde assumenda libero accusantium eveniet adipisci quod cupiditate ea eum delectus earum sunt vitae voluptate quae fugiat, velit voluptas laborum! Maiores libero commodi
tenetur, cum quidem placeat nisi modi iste amet molestias consequuntur hic earum, beatae dolores distinctio qui dignissimos. Obcaecati et temporibus repellat undeplaceat blanditiis! Quasi obcaecati ab ipsum omnis porro, assumenda fuga aperiam molestias
recusandae quis sequi earum quam excepturi minima consequatur quaerat optio rem. Veritatis sapiente, modi dolore quas quam libero consequatur! Natus explicabo qui alias animi eum! Hic sunt nemo eius veniam debitis illo saepe natus dolorem odit amet
omnis inventore similique necessitatibus maiores et iure obcaecati, ut perspiciatis quia! Eveniet iusto fuga eius temporibus, impedit molestias iure pariatur at laborum error, voluptates omnis ad rerum dicta expedita. Culpa facilis, nam aperiam
optio neque possimus in aliquam eveniet id odio, modi ab magni sequi velit dicta nisi sint corporis cum, quae similique natus quod sunt. Et labore necessitatibus praesentium accusamus, voluptatibus aliquam
</p>
<div class="parallax-window" data-parallax="scroll" data-image-src="https://upload.wikimedia.org/wikipedia/commons/7/76/Mapamundi_en_blanco.png" data-z-index="1" data-speed="0.5" data-android-fix="false">
<h1 class="overlay-text">
Text over the parallax image
</h1>
</div>
<p>
voluptatum. Exercitationem dignissimos ratione assumenda nemo quaerat, non dolore doloribus esse et numquam ut nihil aliquid id similique inventore tenetur corporis amet. Expedita ipsam quas sed officiis libero maiores possimus corporis illo doloribus
dolores nihil quasi minima dolorem quia eveniet similique iste, iusto, non aliquid tempore ipsa ratione? Iusto sapiente voluptate, aut, dignissimos enim optio exercitationem ipsum minima earum assumenda consectetur, in minus hic deserunt? Commodi
officiis vero eligendi similique veniam? Dolorem illo veniam eius dolore vero doloremque, debitis excepturi earum, perferendis, aspernatur inventore. Aliquam, voluptates fugit tenetur facilis voluptatibus facere vero quidem perferendis voluptate,
temporibus nesciunt, sunt debitis fuga? Dolor libero commodi in deserunt pariatur veniam ad fugiat temporibus architecto corrupti hic maiores totam repellat repudiandae dolore cumque explicabo voluptatibus vitae quis, consectetur blanditiis quae
adipisci. Maxime, nobis voluptate quaerat similique culpa obcaecati laborum accusantium illum! Ullam molestias doloribus quasi repudiandae eveniet beatae totam maiores maxime accusamus laborum nobis, dolore debitis ea dolorem fugiat, iusto delectus
quia odio minima, voluptates sapiente! Praesentium unde saepe facere consectetur corrupti veritatis autem. Ipsa voluptas debitis dicta esse unde ipsum aut explicabo tempora recusandae quas quod delectus exercitationem dolores odit itaque deserunt,
beatae perferendis aspernatur animi excepturi consectetur. Nihil, voluptas vitae fugit blanditiis voluptatum non iste porro obcaecati accusamus explicabo beatae! Facilis maxime vero ducimus doloremque officia dolor, ad unde quae aliquam? Quos rem
rerum debitis cumque error. Maiores, cum quas consectetur culpa debitis error facere, ipsa quo rerum pariatur ab libero magni sint autem totam hic velit magnam odit atque? Quos optio porro, nulla assumenda quisquam repellat maiores. Quisquam sequi
modi, iure totam nam eligendi in corrupti officia quibusdam cumque ducimus assumenda illo sint rem fugiat quae harum quod odit at minus similique iusto iste vitae. Animi dolorem ab ipsum sint id vero tempore, earum culpa itaque officia. Vero voluptatem
expedita, quae illum iure autem architecto impedit in distinctio nulla possimus nesciunt molestiae ad amet assumenda rerum, consequuntur vel ullam deserunt aut velit distinctio tempore repellat commodi eius harum quas est reiciendis blanditiis quidem
molestias fugiat natus totam nulla itaque sed illo at. Consequatur illo, ipsam accusamus at porro eius tenetur repellendus! Nostrum facere saepe repellat, animi quibusdam voluptates laudantium corporis officiis temporibus ipsam corrupti numquam
modi atque eos, delectus tenetur necessitatibus vitae unde magnam possimus quos harum voluptatum! Excepturi nesciunt voluptatum impedit rem distinctio nobis sit modi pariatur quos illum quis, reiciendis iure obcaecati explicabo! Eum consequuntur,
assumenda aspernatur corrupti error quod modi. Debitis rem officia corporis beatae necessitatibus voluptatibus quas optio harum quibusdam accusantium commodi dolorem ad, velit, recusandae quia incidunt ab libero minus totam aperiam? Quas repellat
eveniet dolores culpa ipsa, doloremque voluptate ad velit, quam, excepturi laboriosam? Assumenda facilis, veniam laudantium voluptatibus vitae explicabo dolorem hic nostrum officiis, exercitationem nulla recusandae soluta maxime commodi perferendis
ipsam placeat accusantium! Doloremque consequuntur facere porro eum officiis? Cum repellendus qui iusto ducimus reiciendis ipsam! Porro, voluptates numquam temporibus perferendis ex explicabo, esse ab maiores illo molestias accusamus unde itaque
voluptate laborum beatae. Aperiam quia, provident error repudiandae impedit, explicabo minus, corrupti neque odit vel maxime officia ducimus commodi voluptates quo facere dolores. Pariatur, fuga soluta illo laborum modi consequatur reiciendis aperiam
explicabo recusandae illum itaque nobis corrupti magnam ea voluptatibus, ratione nesciunt ipsa voluptate minus labore nemo, ipsam officia. Quasi, ipsam iusto. Pariatur omnis eius non doloremque error praesentium architecto dolorem ex id nam quia
tenetur beatae nemo eos numquam officiis, modi magni aut. Tempore libero porro accusamus quas ipsa repellat, eligendi dolor possimus sunt id odit excepturi minus quae, animi placeat. Quasi, iste? Quos fugiat et sapiente, voluptates debitis quaerat!
Omnis magnam assumenda quam laborum dolorem deserunt qui sequi quis error adipisci voluptate reprehenderit voluptas, aut animi harum! Facilis harum laudantium praesentium repellat ducimus esse molestias cupiditate blanditiis enim aliquam, fugit
expedita velit maxime at cum sequi
</p>
</section>
</body>
</html>

.parallax-window {
min-height: 150px;
background: transparent":>
flex-direction: column;
justify-content: center;
color: yellow;
border: red 2px solid;
text-align: center;
}
.over(text)
z-index: 2;
position: relative}
width: 80vh;
margin: auto;
<html>
<head>
<script sec="httpd://Libraries/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script arc="HTTP://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script> use a version range instead of a specific version
https://cdn.jsdelivr.net/npm/jquery#3.2/dist/jquery.min.js
https://cdn.jsdelivr.net/npm/jquery#3/dist/jquery.min.js
</head>
<body>
<section id="my-section" class="g-light">
<div class="parallax-window" data-parallax="scroll" data-image-sec="HTTP://Wikimedia/Wikipedia/commons/7/76/Mandamus_en_blancmange" data-z-index="1" data-speed="0.5" data-iPhone-fix="false">
<1 class="overlay-<text>
Text over the parallax image
</h>
</div>
</section>
</body>
</html>

I was able to find a fix that works at this link: https://github.com/pixelcog/parallax.js/issues/184#issuecomment-451162802
Basically, in your parallax.js (or parallax.min.js) file (assuming you have it in your project file system and are not linking to it from a cdn), search for instances of navigator.userAgent.match, and then replace the Android next to it with something like Android123 to break the code which disables the parallax functionality. Refer to the link above for more.

Make overlay scrollbars? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 3 years ago.
Improve this question
Is it possible to make an overlay scrollbar?
Basically, I have a parent div with child divs inside. I'd like to make the vertical scrollbar overlay on top of the child divs instead of the scrollbar occupying space in the parent div and pushing the child divs to the left.
I'm planning to make the scrollbar transparent and only show it when the parent div gets hovered.
Is that possible with just css or does it need javascript? Please help thanks

I've a solution for you. Give a try to the code given below. And don't forget to put the simplescrollbar.js script in your code using this tag. <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/simple-scrollbar.js"></script>
let scrollDiv = document.querySelector(".area");
SimpleScrollbar.initEl(scrollDiv);
body {
padding: 2rem;
background: #eee;
}
.area {
position: relative;
background: white;
height: 250px;
overflow: hidden;
}
.ss-wrapper {
overflow : hidden;
height : 100%;
position : relative;
z-index : 1;
float: left;
}
.ss-content {
height : 100%;
width : 100%;
position : relative;
right : -18px;
overflow : auto;
-moz-box-sizing : border-box;
box-sizing : border-box;
}
.ss-scroll {
position : relative;
background : rgba(0, 0, 0, .1);
width : 9px;
border-radius : 4px;
top : 0;
z-index : 2;
cursor : pointer;
opacity: 0;
transition: opacity 0.25s linear;
}
.ss-container:hover .ss-scroll {
opacity: 1;
}
.ss-grabbed {
user-select: none;
-o-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
}
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/simple-scrollbar.js"></script>
<div class="area" ss-container>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed cum quisquam sapiente ab consequatur natus ducimus obcaecati minus rerum adipisci laudantium debitis, perferendis pariatur iste provident dolorum ratione voluptate, repudiandae placeat inventore amet quasi ea facere? Delectus numquam vel inventore quasi excepturi. Minus nulla dolore ad animi pariatur provident assumenda dolorum voluptatem porro harum quo aspernatur error placeat sapiente, magnam, atque id molestiae dignissimos corrupti nobis doloremque iure. Voluptate nulla itaque vitae provident, voluptatem numquam sequi suscipit ducimus similique quidem, neque minima architecto tempore asperiores, nihil quae ratione dicta quia unde consectetur tenetur! Aspernatur eveniet dolorem nesciunt sint et eligendi enim quidem blanditiis tenetur! Blanditiis non modi amet, quaerat, vitae consectetur placeat porro dicta, ipsum natus ea possimus. Odio magni possimus modi nemo doloribus corrupti tempora. Aliquid eos error modi non repudiandae illum atque voluptatibus? Odio quod placeat facere sed eligendi, adipisci commodi natus magni soluta dignissimos, aperiam fuga magnam saepe itaque voluptas optio fugiat veritatis velit architecto dolore animi cum sequi quas accusantium! Vel iusto autem sit rerum maxime. Blanditiis libero natus at necessitatibus, odio sed perspiciatis exercitationem quisquam, officiis impedit, a nobis. Exercitationem hic reprehenderit illo, laboriosam ab eaque error sequi, ea expedita rem possimus repellendus numquam delectus est cum maiores neque nihil natus eius. Expedita esse quae, minus, est aspernatur ratione sed aliquid odio ut architecto nostrum provident neque placeat tempora, ipsum natus eum repellendus debitis alias nobis dolorem doloremque laboriosam voluptatem similique. Quisquam rerum molestias ab voluptas voluptatum sit, tenetur odio. Quidem nesciunt assumenda molestias velit harum deserunt culpa vitae beatae veritatis, eum, soluta mollitia numquam cumque! Facilis, dolores sunt aperiam sint molestias iure quidem architecto provident natus quae ab, quia labore tempore minima aliquid voluptatem earum optio tempora. Optio placeat eligendi praesentium quos atque. Similique aliquid neque nisi aliquam molestiae natus, recusandae ullam tempora et minus cum repellat cupiditate fugiat dolorem blanditiis consectetur ea commodi, maxime, odit voluptate hic non ab eaque? Eos exercitationem cumque quas harum aut deserunt ipsam cupiditate doloribus dolorum non doloremque adipisci est, explicabo mollitia voluptates laboriosam molestiae sapiente at ex laborum id? Voluptatem nostrum dicta, tempore eaque quibusdam praesentium fugiat laborum odio nemo adipisci, impedit porro iste, aut sunt consectetur soluta quia nisi repudiandae voluptatibus expedita ab rem iure. Dolorem nemo eaque architecto atque nihil, consequatur voluptates? Consequuntur vero a repudiandae molestias repellat provident minima facilis placeat, perferendis quo laudantium quisquam tenetur fugiat! Vitae repellat ducimus officia. Similique quod sunt quaerat, eum at esse iste. Pariatur sit animi mollitia! Molestiae, quia voluptatum? Expedita, voluptas explicabo. Rerum soluta dolorem expedita optio nostrum ex placeat laudantium minima voluptate, cum neque beatae, pariatur dicta error rem eum aliquam a deleniti quidem doloremque iure aperiam illo atque animi! Soluta facilis eligendi iure magnam. Quasi, quam numquam explicabo quas aliquam cum natus quod iusto, eligendi tenetur ex facilis, modi ut accusantium quibusdam nostrum labore! Provident laborum dolore ipsa sit. Dolore totam tempore quisquam adipisci iste tenetur ducimus saepe quae asperiores quibusdam possimus, maxime voluptatibus non eum praesentium quas dolores similique fugiat placeat numquam illum omnis autem voluptatum! Impedit exercitationem quam quisquam nisi consectetur minima optio dolore dicta! Maxime qui fugiat, beatae possimus modi fuga, unde, adipisci culpa magnam eum a velit. Voluptas libero eos dolores consequuntur nisi corrupti vel rem doloremque ut consequatur, odit magni esse aliquid aperiam possimus eveniet, magnam quaerat exercitationem. Maiores cum officiis reprehenderit ea nam, iure magni esse quos velit praesentium eius unde, laudantium fugit vitae quasi temporibus. Iste fuga iure numquam velit culpa exercitationem officia quis beatae? Deserunt sint eum accusantium, blanditiis fugit harum ex omnis qui officiis magnam nobis eius voluptatibus tenetur, rem dignissimos aut et tempore ipsum cumque commodi laudantium? Maxime praesentium, alias dolores, eos veritatis velit ex ut aliquam tempore est corporis dolorem. Odio, rem ratione. Numquam repellat cum rerum libero sapiente itaque corrupti in ut nihil culpa vitae, laborum molestias nostrum repudiandae eligendi sequi quo officia quibusdam modi commodi consequuntur nisi nobis vero voluptates. Praesentium officia rerum a incidunt ratione, odio quaerat alias, optio repellendus doloremque natus vero quae debitis dolores dignissimos voluptas labore accusantium aliquam asperiores ut eius dolorem. Dolor assumenda at deserunt numquam atque delectus labore, eum, aut dolorem ex, et hic vel rerum fugit! Et tempore harum natus illum dicta maxime magnam delectus ad praesentium reprehenderit nihil nulla aliquid error, fuga ratione dignissimos cumque temporibus blanditiis. Eum doloribus sed odit exercitationem quia quibusdam vero impedit id harum molestias! Distinctio iusto aspernatur quaerat tempora pariatur iste eaque corrupti, vel magnam temporibus recusandae possimus perspiciatis itaque repellat mollitia reprehenderit hic autem quis ex maxime laborum exercitationem placeat ab. Saepe provident incidunt, modi porro aut magni ducimus odit ut minima perferendis, itaque nobis rem explicabo dolor. Voluptates dicta in error nulla vitae corporis fugiat optio. Blanditiis voluptatem sunt nihil? Nihil, dicta excepturi explicabo repellendus enim odio sed totam, fugit error nulla provident omnis saepe illum iste animi? Consequatur, veniam! Voluptates voluptatem veritatis reiciendis. Illo, veritatis pariatur ratione id minima cupiditate. Quibusdam quod deserunt alias ipsam culpa et modi fuga aut id autem. Minima neque nesciunt eligendi accusamus quam deserunt repellendus sequi culpa, cumque quaerat beatae mollitia doloribus? Nisi quibusdam quisquam temporibus. Quas laudantium pariatur totam, voluptas tempora, ad culpa dignissimos blanditiis ut, explicabo voluptatem repellat saepe tempore ipsam? Qui adipisci labore mollitia at, id facere unde aspernatur? Quis numquam a reiciendis vero possimus ut autem. Voluptatibus quas, officiis hic mollitia vero unde iste dolores delectus molestias. Perspiciatis, sit dicta officiis facere minus voluptatem qui iusto est nulla neque perferendis non ipsum minima ipsa quidem consequatur delectus. Ducimus qui quaerat nostrum nulla quis veritatis! Labore quod illo, debitis necessitatibus, repellendus omnis vitae voluptas sequi quia consequuntur velit asperiores sint porro fuga facilis vel voluptatum magni quibusdam delectus quis distinctio? Excepturi tenetur doloremque dolor. Nostrum voluptates harum quis quidem hic odit magni atque repudiandae illum, repellat et explicabo a possimus nesciunt tempore rerum sequi, blanditiis officiis. Error ullam quae labore veritatis eaque reiciendis tempore doloremque quod dignissimos optio tempora perspiciatis, voluptatum non? Animi mollitia dolorem quae impedit quos laudantium perferendis, dolore ut consectetur deserunt veritatis deleniti ipsa excepturi!
</div>

Disable sidebar scroll, if gemini scrollbar

1. Summary
If I use gemini-scrollbar instead of native scrollbar, I can't make, that my sidebar don't scroll.
2. Data
my sidebar in aside tag,
content of my article in main tag.
My minimal example code (see also in Codepen):
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sticky demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/gemini-scrollbar/index.js" defer></script>
<script>
window.onload = function() {
var scrollbar = new GeminiScrollbar({
element: document.querySelector("body"),
autoshow: true,
forceGemini: true,
}).create();
};
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gemini-scrollbar/gemini-scrollbar.css">
<style>
html,
body {
height: 100%;
/*overflow: hidden;*/
}
body {
margin: 0;
padding: 0;
}
aside {
background-size: cover;
height: 100%;
background-image: url("https://kristinita.ru/theme/images/aside/SashaGreenSweater.jpg");
float: left;
}
#media screen and (orientation: portrait) {
aside {
width: 100%;
}
}
#media screen and (orientation: landscape) {
aside {
width: 35%;
position: fixed;
}
main {
width: 65%;
float: right;
}
}
</style>
</head>
<body>
<aside>
</aside>
<main>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente officia ipsum ut harum voluptates, esse unde nam nobis minus nemo cumque, rerum odit aliquam vitae dicta, aliquid eveniet veritatis totam.</div>
<div>Magnam eos esse reprehenderit saepe, natus, placeat quas alias eum facilis, unde explicabo velit eaque dicta nostrum recusandae iste culpa. Quidem nisi architecto ratione atque recusandae ea sequi adipisci incidunt.</div>
<div>Recusandae pariatur ex, a quisquam! Aperiam blanditiis quisquam, officia aut vel, minima laboriosam quam, cumque in maiores enim id unde, deserunt numquam! Vel eligendi qui sunt reprehenderit hic, numquam dolorum.</div>
<div>Sunt quas iste autem accusantium, illo non praesentium quam accusamus impedit repudiandae voluptate harum maiores tenetur dolorem corrupti dolore magnam, a. Magni error eligendi reiciendis repudiandae quod autem nesciunt magnam.</div>
<div>Ullam assumenda velit ad amet totam nemo molestiae expedita temporibus, aliquam. Unde maxime, totam laborum eligendi minima consequatur, sequi voluptate cumque eveniet, beatae libero eius quis omnis ut, repellendus porro.</div>
<div>Cumque nostrum natus omnis temporibus minima unde, similique explicabo provident possimus assumenda molestiae aperiam accusantium odio, non, beatae saepe magnam fugit. Fuga incidunt quae id quisquam expedita sequi, nesciunt ullam.</div>
<div>Temporibus commodi a numquam soluta tempore, facilis voluptate. Dolore ut, harum, aperiam maxime distinctio quisquam aliquid officiis, laudantium voluptates repudiandae eveniet voluptas laborum debitis autem rem earum soluta temporibus iste!</div>
<div>Sed quia excepturi dolorem dolores. Quaerat nisi blanditiis sequi atque deleniti eligendi aliquam ad ipsam culpa natus, impedit numquam dolor maiores quisquam repellat officia voluptate omnis ex doloremque sed sint!</div>
<div>Tenetur consequatur eligendi excepturi nihil, deleniti aliquam. Ut aliquam, laudantium, nostrum necessitatibus, maiores ad neque praesentium illo enim atque repellat amet totam vero cumque aut nemo pariatur perspiciatis iusto id.</div>
<div>Fuga optio eligendi quaerat facere sint nesciunt corrupti necessitatibus! Ea impedit, quasi veniam hic recusandae ipsum incidunt vitae cum, voluptates modi repellat provident beatae quo doloremque rerum illo. Esse, consectetur.</div>
<div>Sunt beatae ex ab, cum dignissimos, eligendi doloribus provident! Adipisci itaque voluptate numquam est quae nisi ut dolor repudiandae modi tempora doloribus reiciendis corporis, blanditiis sed dolore ratione! Voluptatum, placeat.</div>
<div>Natus nobis nisi alias, facilis quae porro. Error doloremque quidem harum obcaecati quasi animi molestiae itaque accusamus, et eligendi. Sapiente quisquam mollitia fugiat quos voluptatibus assumenda. Consectetur ratione, officiis eos.</div>
<div>Commodi obcaecati, nemo. Repellendus voluptatem, voluptatibus vero, assumenda molestias dolorem maiores dolore delectus odit magnam numquam corrupti possimus quibusdam error quae repudiandae in est quod tempora accusantium odio hic quaerat.</div>
<div>Ea eligendi, dolor nostrum necessitatibus porro hic qui repellat soluta veniam similique, ab quae vero, ipsam obcaecati error accusamus. Fugiat temporibus sed magnam repudiandae totam nam minus obcaecati enim, voluptatibus!</div>
<div>Autem dignissimos voluptatem velit molestias recusandae id minima, provident accusantium consequatur, aut temporibus corrupti quaerat quasi quis adipisci numquam minus in rerum dolorum, optio delectus atque ex aspernatur perspiciatis expedita.</div>
<div>Repellat aspernatur sequi, ad veniam veritatis rerum necessitatibus hic voluptatibus delectus dolore eaque quasi in quaerat deserunt, sunt. Recusandae praesentium quibusdam nihil sapiente magni eum iusto iste esse ex a!</div>
<div>Obcaecati omnis adipisci laboriosam temporibus, delectus enim debitis earum voluptatibus, culpa impedit quia et eaque nesciunt. Quos, incidunt debitis. Veniam quaerat nihil maxime numquam eaque beatae delectus, quo ex harum.</div>
<div>Enim illum non, accusantium quas sed quisquam minus aut illo, expedita voluptatum? Odio iure sequi, maiores repellendus quasi ratione distinctio consequatur quaerat perferendis. Iusto eum tempora nostrum necessitatibus, reiciendis aperiam.</div>
<div>Beatae doloribus, officia repellat illo provident temporibus numquam accusamus. Excepturi, tempora unde alias officiis architecto ex odio voluptatum autem adipisci, voluptas sed quos, praesentium pariatur quia tenetur sequi veniam fuga!</div>
<div>Harum quibusdam sequi repudiandae culpa voluptas reprehenderit quod eaque earum odio. Earum vitae non reprehenderit incidunt, eveniet error eum nihil iure sapiente cum, nesciunt, fuga accusamus nulla natus. Obcaecati, quaerat.</div>
<div>Autem dicta recusandae, esse saepe? Expedita consectetur ipsa vitae at esse provident, accusantium molestias, labore, neque totam ullam blanditiis autem perspiciatis minima deleniti iure veniam! Numquam veritatis saepe molestias tempora.</div>
<div>Nesciunt esse similique unde laudantium deleniti. Debitis dignissimos magni exercitationem nulla eius pariatur ducimus minima reiciendis! Eligendi saepe aspernatur laudantium necessitatibus ipsam sed, maxime a. Inventore velit itaque, obcaecati magni.</div>
<div>Repudiandae nam dolores perspiciatis totam minus incidunt, error nihil itaque facere alias, perferendis sit vel! Culpa delectus, maiores assumenda accusamus amet maxime dolores, rerum! Accusantium ipsum distinctio numquam aperiam dolore.</div>
<div>Officiis tempore quae sint iste facere corporis eius ea quos sapiente, et, quo dolore repellat commodi magni quam reprehenderit quisquam perspiciatis nihil ducimus nisi maiores necessitatibus. Non minus, fugiat tempore.</div>
<div>Aspernatur maxime veniam reiciendis quo animi perspiciatis magnam, quidem quos itaque consectetur ratione eius. A, repudiandae consequatur quam doloribus suscipit harum, commodi numquam, in fugit et nostrum quo sunt ex!</div>
</main>
</body>
</html>
3. Expected behavior
If I use native browser scrollbar, position: fixed help me:
4. Actual behavior
If I use gemini-scrollbar, aside scroll with main:
5. Not helped
For example:
5.1. Theia Sticky Sidebar
<script src="https://cdn.jsdelivr.net/npm/jquery#3.3.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/resize-sensor/ResizeSensor.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/theia-sticky-sidebar/dist/theia-sticky-sidebar.min.js"></script>
<script>
jQuery(document).ready(function() {
jQuery('main, aside').theiaStickySidebar({
additionalMarginTop: 0
});
});
</script>
Result.
5.2. Sticky sidebar
<script src="https://cdn.jsdelivr.net/npm/jquery#3.3.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sticky-sidebar/dist/jquery.sticky-sidebar.min.js"></script>
<script>
$('aside').stickySidebar({
topSpacing: 60,
bottomSpacing: 60
});
</script>
Result.
6. Do not offer
Please, do not offer:
6.1. “Don't use gemini-scrollbar”
I don't know another custom scrollbar, that:
replace native body scrollbar,
works without critical bugs,
open source,
active maintained.
6.2. “Use document.querySelector("main") instead of document.querySelector("body")”
I have some problems in my site, if document.querySelector("main") in landscape orientation.
For example, user open anchor of any page of my real site → user resize screen from landscape to portrait or conversely → scrollbar move to begin of my page. I don't know, how I can fix this bug.

1. Summary
As answered plugin owner, I need to add:
.gm-scrollbar-container .gm-scroll-view {
transform: initial;
}
2. Demonstration
Codepen:
Sources
Demo page
Stack Overflow:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sticky demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/gemini-scrollbar/index.js" defer></script>
<script>
window.onload = function() {
var scrollbar = new GeminiScrollbar({
element: document.querySelector("body"),
autoshow: true,
forceGemini: true,
}).create();
};
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gemini-scrollbar/gemini-scrollbar.css">
<style>
html,
body {
height: 100%;
/*overflow: hidden;*/
}
body {
margin: 0;
padding: 0;
}
aside {
background-size: cover;
height: 100%;
background-image: url("https://kristinita.ru/theme/images/aside/SashaGreenSweater.jpg");
float: left;
}
#media screen and (orientation: portrait) {
aside {
width: 100%;
}
}
#media screen and (orientation: landscape) {
aside {
width: 35%;
position: fixed;
}
main {
width: 65%;
float: right;
}
}
.gm-scrollbar-container .gm-scroll-view {
transform: initial;
}
</style>
</head>
<body>
<aside>
</aside>
<!-- Content -->
<main>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente officia ipsum ut harum voluptates, esse unde nam nobis minus nemo cumque, rerum odit aliquam vitae dicta, aliquid eveniet veritatis totam.</div>
<div>Magnam eos esse reprehenderit saepe, natus, placeat quas alias eum facilis, unde explicabo velit eaque dicta nostrum recusandae iste culpa. Quidem nisi architecto ratione atque recusandae ea sequi adipisci incidunt.</div>
<div>Recusandae pariatur ex, a quisquam! Aperiam blanditiis quisquam, officia aut vel, minima laboriosam quam, cumque in maiores enim id unde, deserunt numquam! Vel eligendi qui sunt reprehenderit hic, numquam dolorum.</div>
<div>Sunt quas iste autem accusantium, illo non praesentium quam accusamus impedit repudiandae voluptate harum maiores tenetur dolorem corrupti dolore magnam, a. Magni error eligendi reiciendis repudiandae quod autem nesciunt magnam.</div>
<div>Ullam assumenda velit ad amet totam nemo molestiae expedita temporibus, aliquam. Unde maxime, totam laborum eligendi minima consequatur, sequi voluptate cumque eveniet, beatae libero eius quis omnis ut, repellendus porro.</div>
<div>Cumque nostrum natus omnis temporibus minima unde, similique explicabo provident possimus assumenda molestiae aperiam accusantium odio, non, beatae saepe magnam fugit. Fuga incidunt quae id quisquam expedita sequi, nesciunt ullam.</div>
<div>Temporibus commodi a numquam soluta tempore, facilis voluptate. Dolore ut, harum, aperiam maxime distinctio quisquam aliquid officiis, laudantium voluptates repudiandae eveniet voluptas laborum debitis autem rem earum soluta temporibus iste!</div>
<div>Sed quia excepturi dolorem dolores. Quaerat nisi blanditiis sequi atque deleniti eligendi aliquam ad ipsam culpa natus, impedit numquam dolor maiores quisquam repellat officia voluptate omnis ex doloremque sed sint!</div>
<div>Tenetur consequatur eligendi excepturi nihil, deleniti aliquam. Ut aliquam, laudantium, nostrum necessitatibus, maiores ad neque praesentium illo enim atque repellat amet totam vero cumque aut nemo pariatur perspiciatis iusto id.</div>
<div>Fuga optio eligendi quaerat facere sint nesciunt corrupti necessitatibus! Ea impedit, quasi veniam hic recusandae ipsum incidunt vitae cum, voluptates modi repellat provident beatae quo doloremque rerum illo. Esse, consectetur.</div>
<div>Sunt beatae ex ab, cum dignissimos, eligendi doloribus provident! Adipisci itaque voluptate numquam est quae nisi ut dolor repudiandae modi tempora doloribus reiciendis corporis, blanditiis sed dolore ratione! Voluptatum, placeat.</div>
<div>Natus nobis nisi alias, facilis quae porro. Error doloremque quidem harum obcaecati quasi animi molestiae itaque accusamus, et eligendi. Sapiente quisquam mollitia fugiat quos voluptatibus assumenda. Consectetur ratione, officiis eos.</div>
<div>Commodi obcaecati, nemo. Repellendus voluptatem, voluptatibus vero, assumenda molestias dolorem maiores dolore delectus odit magnam numquam corrupti possimus quibusdam error quae repudiandae in est quod tempora accusantium odio hic quaerat.</div>
<div>Ea eligendi, dolor nostrum necessitatibus porro hic qui repellat soluta veniam similique, ab quae vero, ipsam obcaecati error accusamus. Fugiat temporibus sed magnam repudiandae totam nam minus obcaecati enim, voluptatibus!</div>
<div>Autem dignissimos voluptatem velit molestias recusandae id minima, provident accusantium consequatur, aut temporibus corrupti quaerat quasi quis adipisci numquam minus in rerum dolorum, optio delectus atque ex aspernatur perspiciatis expedita.</div>
<div>Repellat aspernatur sequi, ad veniam veritatis rerum necessitatibus hic voluptatibus delectus dolore eaque quasi in quaerat deserunt, sunt. Recusandae praesentium quibusdam nihil sapiente magni eum iusto iste esse ex a!</div>
<div>Obcaecati omnis adipisci laboriosam temporibus, delectus enim debitis earum voluptatibus, culpa impedit quia et eaque nesciunt. Quos, incidunt debitis. Veniam quaerat nihil maxime numquam eaque beatae delectus, quo ex harum.</div>
<div>Enim illum non, accusantium quas sed quisquam minus aut illo, expedita voluptatum? Odio iure sequi, maiores repellendus quasi ratione distinctio consequatur quaerat perferendis. Iusto eum tempora nostrum necessitatibus, reiciendis aperiam.</div>
<div>Beatae doloribus, officia repellat illo provident temporibus numquam accusamus. Excepturi, tempora unde alias officiis architecto ex odio voluptatum autem adipisci, voluptas sed quos, praesentium pariatur quia tenetur sequi veniam fuga!</div>
<div>Harum quibusdam sequi repudiandae culpa voluptas reprehenderit quod eaque earum odio. Earum vitae non reprehenderit incidunt, eveniet error eum nihil iure sapiente cum, nesciunt, fuga accusamus nulla natus. Obcaecati, quaerat.</div>
<div>Autem dicta recusandae, esse saepe? Expedita consectetur ipsa vitae at esse provident, accusantium molestias, labore, neque totam ullam blanditiis autem perspiciatis minima deleniti iure veniam! Numquam veritatis saepe molestias tempora.</div>
<div>Nesciunt esse similique unde laudantium deleniti. Debitis dignissimos magni exercitationem nulla eius pariatur ducimus minima reiciendis! Eligendi saepe aspernatur laudantium necessitatibus ipsam sed, maxime a. Inventore velit itaque, obcaecati magni.</div>
<div>Repudiandae nam dolores perspiciatis totam minus incidunt, error nihil itaque facere alias, perferendis sit vel! Culpa delectus, maiores assumenda accusamus amet maxime dolores, rerum! Accusantium ipsum distinctio numquam aperiam dolore.</div>
<div>Officiis tempore quae sint iste facere corporis eius ea quos sapiente, et, quo dolore repellat commodi magni quam reprehenderit quisquam perspiciatis nihil ducimus nisi maiores necessitatibus. Non minus, fugiat tempore.</div>
<div>Aspernatur maxime veniam reiciendis quo animi perspiciatis magnam, quidem quos itaque consectetur ratione eius. A, repudiandae consequatur quam doloribus suscipit harum, commodi numquam, in fugit et nostrum quo sunt ex!</div>
</main>
</body>
</html>
3. Explanation
transform property in gemini-scrollbar.css: 1, 2.
transform create a new local coordinate system.
The initial keyword is used to set a CSS property to its default value.
4. Additional links
CSS initial Keyword
CSS transform Property

Youtube iframe is blocking scroll (perfect scrollbar)

can u help me with one issue.
i can't scroll page when mouse is over youtube iframe
I don't know what else i can add here.
$('.container').perfectScrollbar();
.container {
width: 100%;
height: 400px;
margin: 50px auto 0 auto;
position: relative;
overflow: auto;
}
.content {
background: url('https://noraesae.github.io/perfect-scrollbar/azusa.jpg') top left no-repeat;
width: 1280px;
height: 720px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.10/css/perfect-scrollbar.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-2.2.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.10/js/perfect-scrollbar.jquery.js"></script>
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil necessitatibus nemo dolore totam fugiat magni, laudantium nostrum ducimus atque numquam, vitae error, libero voluptas obcaecati. Molestias cum, sed enim cumque sit minus laborum quasi, illum tempore quidem quaerat temporibus corporis itaque qui dolores eius nulla. Officiis deleniti ab laborum cupiditate assumenda enim unde ducimus quam aperiam magni totam quasi similique voluptas aliquid voluptatibus voluptate blanditiis beatae possimus explicabo, nihil, dolor delectus, omnis nisi, quia quod. Tempora, nihil. Optio dolor nulla repellendus inventore reiciendis, animi rem, necessitatibus aut commodi repudiandae illo expedita deserunt aliquam! Iste nam iusto id, dolor perferendis accusantium impe
<iframe width="560" height="315" src="https://www.youtube.com/embed/4qcetGktEuc" frameborder="0" allowfullscreen></iframe>
eaque minus nostrum quis optio consequatur quo nulla, qui dicta. Sunt officia laboriosam adipisci consectetur eius atque nobis dignissimos magnam. Ratione quis modi, minima magni, quos dolorem quasi nemo sunt nisi unde itaque temporibus fugit officia accusamus perferendiperspiciatis, quod eius laboriosam cumque numquam vel est sed illo. Placeat nemo amet id, consequuntur molestias culpa eligendi commodi maxime, sapiente eveniet totam voluptatibus natus harum voluptas perferendis quae tempora nulla, repellat temporibus, ex odit. Expedita dolore, incidunt similique veritatis perspiciatis repudiandae sunt sequi magni inventore mollitia tempore impedit quasi ea dolorem porro, accusamus laboriosam. Aperiam magni commodi laudantium natus. Atque quidem tempora temporibus recus Cupiditate a voluptatum repellat aliquam architecto ipsa non sint laudantium necessitatibus inventore natus ab dolor, illum sit officia enim expedita iste perferendis libero! Corrupti praesentium id expedita rerum, quos optio vitae ipsum! Sequi sit fugiat inventore temporibus consequuntur eum labore officia fugit. Illo sequi distinctio quos illum id architecto quisquam facere perferendis. Voluptate pariatur, molestias voluptates animi voluptatem deserunt, assumenda natus libero ex qui omnis error perspiciatis.
</div>

We Keep Coding

JavaScript is the programming language of the Web.