Related
I'm trying to create a background for my site and it works beautifully on desktop
but the background starts to resize when I scroll in my mobile browser (chrome) mainly because of the browser search bar hiding and reappearing upon scroll.
Is there any way I can prevent my background from resizing?
here's a video of what happens on my mobile: https://streamable.com/0fplj6
here's the code:
html {
height: 100vh;
margin: 0;
width: 100%;
}
body {
margin: 0;
height: 100%;
;
width: 100%;
background-image: url("https://ogden_images.s3.amazonaws.com/www.observertoday.com/images/2020/08/29003327/SUNSET-579x840.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#header {
width: 100%;
height: 50px;
background-color: black;
}
#header img {
height: 6rem;
margin: 1rem;
}
#content {
width: 70%;
margin: auto;
background: yellow;
overflow: hidden;
}
<body>
<div id="header"></div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis necessitatibusaspernatur accusamus, sit exercitationem nostrum itaque sed consequaturperferendis iusto maiores possimus saepe numquam pariatur? Labore excepturitotam id ipsum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobisnecessitatibus aspernatur accusamus, sit exercitationem nostrum itaque sedconsequatur perferendis iusto maiores possimus saepe numquam pariatur? Laboreexcepturi totam id ipsum. Lorem ipsum dolor sit amet, consectetur adipisicingelit. Nobis necessitatibus aspernatur accusamus, sit exercitationem nostrumitaque sed consequatur perferendis iusto maiores possimus saepe numquampariatur? Labore excepturi totam id ipsum. Lorem ipsum dolor sit amet,consectetur adipisicing elit. Nobis necessitatibus aspernatur accusamus, sitexercitationem nostrum itaque sed consequatur perferendis iusto maiores possimussaepe numquam pariatur? Labore excepturi totam id ipsum. Lorem ipsum dolor sitamet, consectetur adipisicing elit. Nobis necessitatibus aspernatur accusamus,sit exercitationem nostrum itaque sed consequatur perferendis iusto maiorespossimus saepe numquam pariatur? Labore excepturi totam id ipsum. Lorem ipsumdolor sit amet, consectetur adipisicing elit. Nobis necessitatibus aspernaturaccusamus, sit exercitationem nostrum itaque sed consequatur perferendis iustomaiores possimus saepe numquam pariatur? Labore excepturi totam id ipsum. Loremipsum dolor sit amet, consectetur adipisicing elit. Nobis necessitatibusaspernatur accusamus, sit exercitationem nostrum itaque sed consequaturperferendis iusto maiores possimus saepe numquam pariatur? Labore excepturitotam id ipsum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobisnecessitatibus aspernatur accusamus, sit exercitationem nostrum itaque sedconsequatur perferendis iusto maiores possimus saepe numquam pariatur? Laboreexcepturi totam id ipsum. Lorem ipsum dolor sit amet, consectetur adipisicingelit. Nobis necessitatibus aspernatur accusamus, sit exercitationem nostrumitaque sed consequatur perferendis iusto maiores possimus saepe numquampariatur? Labore excepturi totam id ipsum.
</div>
</body>
I found a question which was similar
https://stackoverflow.com/questions/24944925/background-image-jumps-when-address-bar-hides-ios-android-mobile-chrome
but it was 6 years old and none of the solutions were working (in pure css)
so is there any solution preferably with pure css? (use vanilla javascript if absolutely necessary)
The main culprit is the background-position:fixed as it was meant to size up to the browser screen (minus the address bar area)
The trick is in using a sticky background.
I tested the below code and it should not resize on scrolling down in the mobile browser
html,
body {
margin: 0;
width: 100%;
max-height: 100%;
max-width: 100%;
}
#header {
height: 50px;
width: 100%;
background: black;
}
#rest {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
background: blue;
}
#content {
width: 50%;
z-index: 0;
grid-row: 1;
grid-column: 1;
margin: 0 auto;
background: yellow;
}
#sticky_back {
width: 100%;
height: 100vh;
grid-row: 1;
grid-column: 1;
position: sticky;
top: 0;
background-image: url("https://ogden_images.s3.amazonaws.com/www.observertoday.com/images/2020/08/29003327/SUNSET-579x840.jpg");
background-repeat: no-repeat;
background-size: cover;
}
<body>
<div id="header"></div>
<div id="rest">
<div id="sticky_back"></div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis necessitatibusaspernatur accusamus, sit exercitationem nostrum itaque sed consequaturperferendis iusto maiores possimus saepe numquam pariatur? Labore excepturitotam id ipsum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobisnecessitatibus aspernatur accusamus, sit exercitationem nostrum itaque sedconsequatur perferendis iusto maiores possimus saepe numquam pariatur? Laboreexcepturi totam id ipsum. Lorem ipsum dolor sit amet, consectetur adipisicingelit. Nobis necessitatibus aspernatur accusamus, sit exercitationem nostrumitaque sed consequatur perferendis iusto maiores possimus saepe numquampariatur? Labore excepturi totam id ipsum. Lorem ipsum dolor sit amet,consectetur adipisicing elit. Nobis necessitatibus aspernatur accusamus, sitexercitationem nostrum itaque sed consequatur perferendis iusto maiores possimussaepe numquam pariatur? Labore excepturi totam id ipsum. Lorem ipsum dolor sitamet, consectetur adipisicing elit. Nobis necessitatibus aspernatur accusamus,sit exercitationem nostrum itaque sed consequatur perferendis iusto maiorespossimus saepe numquam pariatur? Labore excepturi totam id ipsum. Lorem ipsumdolor sit amet, consectetur adipisicing elit. Nobis necessitatibus aspernaturaccusamus, sit exercitationem nostrum itaque sed consequatur perferendis iustomaiores possimus saepe numquam pariatur? Labore excepturi totam id ipsum. Loremipsum dolor sit amet, consectetur adipisicing elit. Nobis necessitatibusaspernatur accusamus, sit exercitationem nostrum itaque sed consequaturperferendis iusto maiores possimus saepe numquam pariatur? Labore excepturitotam id ipsum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobisnecessitatibus aspernatur accusamus, sit exercitationem nostrum itaque sedconsequatur perferendis iusto maiores possimus saepe numquam pariatur? Laboreexcepturi totam id ipsum. Lorem ipsum dolor sit amet, consectetur adipisicingelit. Nobis necessitatibus aspernatur accusamus, sit exercitationem nostrumitaque sed consequatur perferendis iusto maiores possimus saepe numquampariatur? Labore excepturi totam id ipsum.
</div>
</div>
</body>
I have html and css scripts where I want to make a sticky top navigation bar, but when I scroll down, the width of the navigation bar is different, I've tried changing some settings in css but it doesn't help
Also, when I scrolled, the "news" menu button which should have been dropdown couldn't dropdown, how do I fix it?
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*My Style*/
.container {
width: 80%;
margin: auto;
background-color: white;
}
body {
font: 16px/28px arial, sans-serif;
background-color: gray;
color: #333;
}
.header {
padding: 20px;
}
.header .judul {
font-size: 40px;
font-weight: bold;
text-align: center;
margin-bottom: 20px;
}
#navigator {
font: 18px/32px Times, serif;
overflow: hidden;
background-color: #333;
}
#navigator a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 6px 20px;
text-decoration: none;
font-size: 17px;
}
#navigator a:hover {
background-color: #ddd;
color: black;
}
#navigator a.active {
background-color: #4CAF50;
color: white;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown-content {
margin-top: 43px;
display: none;
position: absolute;
background-color: #333;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: white;
padding: 5px 17px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.content {
padding: 16px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 60px;
}
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link rel="icon" href="assets/img/itenas_logo.png" type="image/png" sizes="16x16">
<link rel="stylesheet" href="assets/css/style3.css">
<title>STICKY TOP NAVBAR</title>
</head>
<body>
<div class="container">
<div class="header">
<h1 class="judul">STICKY TOP NAVBAR</h1>
<div id="navigator">
<a class="active" href="#">Home</a>
<div class="dropdown">
<a class="dropa" href="#">News</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
Contact
About
</div>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum incidunt ad, ex voluptatum iste illum perferendis velit nam numquam vero soluta, expedita minus ullam magnam veritatis exercitationem labore! Hic, unde? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Obcaecati blanditiis veritatis rem ipsa voluptas consectetur sint perspiciatis ex? Vel dolor corrupti repudiandae dicta ratione laborum voluptas cum consequuntur repellendus! Eius.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus minus excepturi accusamus doloremque architecto nisi nobis quasi libero dolore. Est impedit nihil ea voluptatibus omnis at magni facilis dolorem quam. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto repellendus obcaecati blanditiis veritatis voluptate commodi a qui corporis sed voluptatibus vel at illo, optio ratione placeat, magni quam nam fugiat? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit ipsa in ex voluptatem! Tenetur, ducimus alias eaque iusto distinctio nostrum vero, dicta, earum fugit impedit nihil tempora non beatae! Incidunt? Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus omnis dolores, obcaecati eveniet, natus enim eaque sint asperiores saepe aperiam delectus? Ipsa dolor illum pariatur sapiente consequatur possimus esse?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus officiis corporis alias temporibus? Ipsa tempora, perspiciatis provident nesciunt nam hic non voluptatum optio laborum veritatis sint consequuntur similique fugit alias. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Similique magnam eum unde sapiente veniam error beatae optio explicabo, vel obcaecati, dolorem saepe cumque adipisci reiciendis minus inventore enim modi animi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit modi facere omnis non? In magni provident nulla vero ipsa debitis voluptate asperiores autem vitae. In laboriosam fuga modi sit non.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora quo, tenetur at quam nostrum mollitia magnam vel iure, eius omnis aspernatur alias quae necessitatibus. Modi eveniet amet excepturi accusamus obcaecati! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae, iure. Dolorum deserunt fugit officia aliquam, eveniet voluptatibus ab maxime et, accusantium nihil cumque temporibus reiciendis. Eveniet nam vitae adipisci et.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus soluta veritatis laudantium ipsum rem. Beatae quisquam a cumque at nobis exercitationem. Necessitatibus enim ducimus explicabo, nisi qui aspernatur fugiat libero. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex, odit earum, tempore ducimus architecto recusandae laudantium distinctio labore aliquid ipsum atque quidem ab modi dolores adipisci est itaque magni. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquid optio necessitatibus quisquam tenetur laudantium velit, porro illum eum quia molestias ratione earum, eos autem nostrum cumque unde hic adipisci. Placeat?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum incidunt ad, ex voluptatum iste illum perferendis velit nam numquam vero soluta, expedita minus ullam magnam veritatis exercitationem labore! Hic, unde? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Obcaecati blanditiis veritatis rem ipsa voluptas consectetur sint perspiciatis ex? Vel dolor corrupti repudiandae dicta ratione laborum voluptas cum consequuntur repellendus! Eius.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus minus excepturi accusamus doloremque architecto nisi nobis quasi libero dolore. Est impedit nihil ea voluptatibus omnis at magni facilis dolorem quam. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto repellendus obcaecati blanditiis veritatis voluptate commodi a qui corporis sed voluptatibus vel at illo, optio ratione placeat, magni quam nam fugiat? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit ipsa in ex voluptatem! Tenetur, ducimus alias eaque iusto distinctio nostrum vero, dicta, earum fugit impedit nihil tempora non beatae! Incidunt? Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus omnis dolores, obcaecati eveniet, natus enim eaque sint asperiores saepe aperiam delectus? Ipsa dolor illum pariatur sapiente consequatur possimus esse?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus officiis corporis alias temporibus? Ipsa tempora, perspiciatis provident nesciunt nam hic non voluptatum optio laborum veritatis sint consequuntur similique fugit alias. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Similique magnam eum unde sapiente veniam error beatae optio explicabo, vel obcaecati, dolorem saepe cumque adipisci reiciendis minus inventore enim modi animi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit modi facere omnis non? In magni provident nulla vero ipsa debitis voluptate asperiores autem vitae. In laboriosam fuga modi sit non.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora quo, tenetur at quam nostrum mollitia magnam vel iure, eius omnis aspernatur alias quae necessitatibus. Modi eveniet amet excepturi accusamus obcaecati! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae, iure. Dolorum deserunt fugit officia aliquam, eveniet voluptatibus ab maxime et, accusantium nihil cumque temporibus reiciendis. Eveniet nam vitae adipisci et.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus soluta veritatis laudantium ipsum rem. Beatae quisquam a cumque at nobis exercitationem. Necessitatibus enim ducimus explicabo, nisi qui aspernatur fugiat libero. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex, odit earum, tempore ducimus architecto recusandae laudantium distinctio labore aliquid ipsum atque quidem ab modi dolores adipisci est itaque magni. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquid optio necessitatibus quisquam tenetur laudantium velit, porro illum eum quia molestias ratione earum, eos autem nostrum cumque unde hic adipisci. Placeat?</p>
</div>
</div>
<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navigator");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
</body>
</html>
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*My Style*/
.container {
width: 80%;
margin: auto;
background-color: white;
}
body {
font: 16px/28px arial, sans-serif;
background-color: gray;
color: #333;
}
.header {
padding: 20px;
}
.header .judul {
font-size: 40px;
font-weight: bold;
text-align: center;
margin-bottom: 20px;
}
#navigator {
font: 18px/32px Times, serif;
overflow: hidden;
background-color: #333;
}
#navigator a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 6px 20px;
text-decoration: none;
font-size: 17px;
}
#navigator a:hover {
background-color: #ddd;
color: black;
}
#navigator a.active {
background-color: #4CAF50;
color: white;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown-content {
margin-top: 43px;
display: none;
position: absolute;
background-color: #333;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: white;
padding: 5px 17px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.content {
padding: 16px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 60px;
}
div#navigator {
width: 100%;
z-index: 9999;
left: 0;
}
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link rel="icon" href="assets/img/itenas_logo.png" type="image/png" sizes="16x16">
<link rel="stylesheet" href="assets/css/style3.css">
<title>STICKY TOP NAVBAR</title>
</head>
<body>
<div class="container">
<div class="header">
<h1 class="judul">STICKY TOP NAVBAR</h1>
<div id="navigator">
<a class="active" href="#">Home</a>
<div class="dropdown">
<a class="dropa" href="#">News</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
Contact
About
</div>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum incidunt ad, ex voluptatum iste illum perferendis velit nam numquam vero soluta, expedita minus ullam magnam veritatis exercitationem labore! Hic, unde? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Obcaecati blanditiis veritatis rem ipsa voluptas consectetur sint perspiciatis ex? Vel dolor corrupti repudiandae dicta ratione laborum voluptas cum consequuntur repellendus! Eius.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus minus excepturi accusamus doloremque architecto nisi nobis quasi libero dolore. Est impedit nihil ea voluptatibus omnis at magni facilis dolorem quam. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto repellendus obcaecati blanditiis veritatis voluptate commodi a qui corporis sed voluptatibus vel at illo, optio ratione placeat, magni quam nam fugiat? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit ipsa in ex voluptatem! Tenetur, ducimus alias eaque iusto distinctio nostrum vero, dicta, earum fugit impedit nihil tempora non beatae! Incidunt? Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus omnis dolores, obcaecati eveniet, natus enim eaque sint asperiores saepe aperiam delectus? Ipsa dolor illum pariatur sapiente consequatur possimus esse?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus officiis corporis alias temporibus? Ipsa tempora, perspiciatis provident nesciunt nam hic non voluptatum optio laborum veritatis sint consequuntur similique fugit alias. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Similique magnam eum unde sapiente veniam error beatae optio explicabo, vel obcaecati, dolorem saepe cumque adipisci reiciendis minus inventore enim modi animi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit modi facere omnis non? In magni provident nulla vero ipsa debitis voluptate asperiores autem vitae. In laboriosam fuga modi sit non.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora quo, tenetur at quam nostrum mollitia magnam vel iure, eius omnis aspernatur alias quae necessitatibus. Modi eveniet amet excepturi accusamus obcaecati! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae, iure. Dolorum deserunt fugit officia aliquam, eveniet voluptatibus ab maxime et, accusantium nihil cumque temporibus reiciendis. Eveniet nam vitae adipisci et.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus soluta veritatis laudantium ipsum rem. Beatae quisquam a cumque at nobis exercitationem. Necessitatibus enim ducimus explicabo, nisi qui aspernatur fugiat libero. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex, odit earum, tempore ducimus architecto recusandae laudantium distinctio labore aliquid ipsum atque quidem ab modi dolores adipisci est itaque magni. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquid optio necessitatibus quisquam tenetur laudantium velit, porro illum eum quia molestias ratione earum, eos autem nostrum cumque unde hic adipisci. Placeat?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum incidunt ad, ex voluptatum iste illum perferendis velit nam numquam vero soluta, expedita minus ullam magnam veritatis exercitationem labore! Hic, unde? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Obcaecati blanditiis veritatis rem ipsa voluptas consectetur sint perspiciatis ex? Vel dolor corrupti repudiandae dicta ratione laborum voluptas cum consequuntur repellendus! Eius.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus minus excepturi accusamus doloremque architecto nisi nobis quasi libero dolore. Est impedit nihil ea voluptatibus omnis at magni facilis dolorem quam. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto repellendus obcaecati blanditiis veritatis voluptate commodi a qui corporis sed voluptatibus vel at illo, optio ratione placeat, magni quam nam fugiat? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit ipsa in ex voluptatem! Tenetur, ducimus alias eaque iusto distinctio nostrum vero, dicta, earum fugit impedit nihil tempora non beatae! Incidunt? Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus omnis dolores, obcaecati eveniet, natus enim eaque sint asperiores saepe aperiam delectus? Ipsa dolor illum pariatur sapiente consequatur possimus esse?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus officiis corporis alias temporibus? Ipsa tempora, perspiciatis provident nesciunt nam hic non voluptatum optio laborum veritatis sint consequuntur similique fugit alias. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Similique magnam eum unde sapiente veniam error beatae optio explicabo, vel obcaecati, dolorem saepe cumque adipisci reiciendis minus inventore enim modi animi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit modi facere omnis non? In magni provident nulla vero ipsa debitis voluptate asperiores autem vitae. In laboriosam fuga modi sit non.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora quo, tenetur at quam nostrum mollitia magnam vel iure, eius omnis aspernatur alias quae necessitatibus. Modi eveniet amet excepturi accusamus obcaecati! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae, iure. Dolorum deserunt fugit officia aliquam, eveniet voluptatibus ab maxime et, accusantium nihil cumque temporibus reiciendis. Eveniet nam vitae adipisci et.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus soluta veritatis laudantium ipsum rem. Beatae quisquam a cumque at nobis exercitationem. Necessitatibus enim ducimus explicabo, nisi qui aspernatur fugiat libero. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex, odit earum, tempore ducimus architecto recusandae laudantium distinctio labore aliquid ipsum atque quidem ab modi dolores adipisci est itaque magni. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquid optio necessitatibus quisquam tenetur laudantium velit, porro illum eum quia molestias ratione earum, eos autem nostrum cumque unde hic adipisci. Placeat?</p>
</div>
</div>
<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navigator");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
</body>
</html>
Hello sticky class in parent ine position relative you can make itself position absolute
So I when I start scrolling into my div, my initial value is 0. When I reach the bottom of the div, I want my value to be 100.
Here's an example :
var initial = 0;
var end = 100;
$('div').scroll(function() {
initial++;
console.log(initial);
});
div {
width: 200px;
height: 300px;
border: 1px solid;
overflow-y: scroll;
background-color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus exercitationem numquam assumenda alias blanditiis, neque labore eaque veritatis dignissimos, odio atque praesentium ut, itaque! Neque sed voluptas, similique ullam omnis.lorem Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Soluta eos quas ea quia fuga aperiam maxime amet, a odit adipisci earum autem necessitatibus. Quidem obcaecati eveniet maxime ducimus provident saepe. Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Ipsum deserunt, ipsam explicabo voluptate laborum nam odio nemo neque, libero iusto officia consequuntur dolorem quis est quod eaque? Similique, porro, et!</div>
In this example, if you check the console, When I scroll, the last value is 5, I want it to be 100
Thanks for your help !
You can set initial to be the percentage of the scrollable height
var $test = $('.test');
var scrollableHeight = $test.height() - $test[0].scrollHeight; // get amount of scroll available
$test.scroll(function() {
var $this = $(this);
var initial = $this.scrollTop() / scrollableHeight * -100; // divide the scroll top by the amount of scrollable height to get the percentage then times by -100 to make it a positive number out of 100
console.log(parseInt(initial)); // parseInt is optional - just gives you integers
});
.test {
width: 200px;
height: 300px;
border: 1px solid;
overflow-y: scroll;
background-color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus exercitationem numquam assumenda alias blanditiis, neque labore eaque veritatis dignissimos, odio atque praesentium ut, itaque! Neque sed voluptas, similique ullam omnis.lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta eos quas ea quia fuga aperiam maxime amet, a odit adipisci earum autem necessitatibus. Quidem obcaecati eveniet maxime ducimus provident saepe. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum deserunt, ipsam explicabo voluptate laborum nam odio nemo neque, libero iusto officia consequuntur dolorem quis est quod eaque? Similique, porro, et!</div>
At first this seems to be duplicate question answered here but there is more that need to be figured out.
How can I resolve below given [Violation] warning in google chrome console?
[Violation] Added non-passive event listener to a scroll-blocking
'mousewheel' event. Consider marking event handler as 'passive' to
make the page more responsive.
Here is the code snippet that works but with the above mentioned [Violation] warning.
$.fn.isolatedScroll = function() {
this.on('mousewheel DOMMouseScroll', function (e) {
let delta = e.wheelDelta || (e.originalEvent && e.originalEvent.wheelDelta) || -e.detail,
bottomOverflow = this.scrollTop + $(this).outerHeight() - this.scrollHeight >= 0,
topOverflow = this.scrollTop <= 0;
if ((delta < 0 && bottomOverflow) || (delta > 0 && topOverflow)) {
e.preventDefault();
}
});
return this;
};
$('.js-isolated-scroll').isolatedScroll()
// Nothing to check here as it's just repeating <p> tags
function multiplyNode(node, count, deep) {
for (var i = 0, copy; i < count - 1; i++) {
copy = node.cloneNode(deep);
node.parentNode.insertBefore(copy, node);
}
}
multiplyNode(document.querySelector('.p-in-fixed'), 20, true);
multiplyNode(document.querySelector('.p-in-body'), 20, true);
body{
position: relative;
background-color: #ccc !important;
padding: 20px 20px 20px 50%;
}
.fixed {
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
padding: 20px;
overflow: auto;
position: fixed;
border: 1px solid #333;
width: calc(50% - 40px);
background-color: #f8f8f8;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="js-isolated-scroll fixed">
<p class="p-in-fixed">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates.</p>
</div>
<p class="p-in-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates.</p>
Here is how I tried to fix it using Modernizr's passiveeventlisteners with this code Modernizr.passiveeventlisteners ? {passive:true} : false while following an answer given here. But I am getting this error message in console:
Unable to preventDefault inside passive event listener invocation.
It's clear for me that I cannot using e.preventDefault() while using {passive:true} and that make sense, I just want know how can I Prevent page scrolling when scrolling a DIV while resolving [Violation] warning in console.
Here is the code snippet that doesn't work and produces above mentioned error in console.
document.getElementById('fixed-content').addEventListener('wheel', avoidBodyScroll, Modernizr.passiveeventlisteners ? {passive:true} : false);
document.getElementById('fixed-content').addEventListener('mousewheel', avoidBodyScroll, Modernizr.passiveeventlisteners ? {passive:true} : false);
document.getElementById('fixed-content').addEventListener('DOMMouseScroll', avoidBodyScroll, Modernizr.passiveeventlisteners ? {passive:true} : false);
function avoidBodyScroll(e) {
let delta = e.wheelDelta || (e.originalEvent && e.originalEvent.wheelDelta) || -e.detail,
bottomOverflow = this.scrollTop + $(this).outerHeight() - this.scrollHeight >= 0,
topOverflow = this.scrollTop <= 0;
if ((delta < 0 && bottomOverflow) || (delta > 0 && topOverflow)) {
e.preventDefault();
}
}
// Nothing to check here as it's just repeating <p> tags
function multiplyNode(node, count, deep) {
for (var i = 0, copy; i < count - 1; i++) {
copy = node.cloneNode(deep);
node.parentNode.insertBefore(copy, node);
}
}
multiplyNode(document.querySelector('.p-in-fixed'), 20, true);
multiplyNode(document.querySelector('.p-in-body'), 20, true);
body{
position: relative;
background-color: #ccc !important;
padding: 20px 20px 20px 50%;
}
.fixed {
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
padding: 20px;
overflow: auto;
position: fixed;
border: 1px solid #333;
width: calc(50% - 40px);
background-color: #f8f8f8;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
/*! modernizr 3.5.0 (Custom Build) | MIT *
* https://modernizr.com/download/?-passiveeventlisteners-setclasses !*/
!function(e,n,s){function o(e,n){return typeof e===n}function a(){var e,n,s,a,t,f,l;for(var c in r)if(r.hasOwnProperty(c)){if(e=[],n=r[c],n.name&&(e.push(n.name.toLowerCase()),n.options&&n.options.aliases&&n.options.aliases.length))for(s=0;s<n.options.aliases.length;s++)e.push(n.options.aliases[s].toLowerCase());for(a=o(n.fn,"function")?n.fn():n.fn,t=0;t<e.length;t++)f=e[t],l=f.split("."),1===l.length?Modernizr[l[0]]=a:(!Modernizr[l[0]]||Modernizr[l[0]]instanceof Boolean||(Modernizr[l[0]]=new Boolean(Modernizr[l[0]])),Modernizr[l[0]][l[1]]=a),i.push((a?"":"no-")+l.join("-"))}}function t(e){var n=l.className,s=Modernizr._config.classPrefix||"";if(c&&(n=n.baseVal),Modernizr._config.enableJSClass){var o=new RegExp("(^|\\s)"+s+"no-js(\\s|$)");n=n.replace(o,"$1"+s+"js$2")}Modernizr._config.enableClasses&&(n+=" "+s+e.join(" "+s),c?l.className.baseVal=n:l.className=n)}var i=[],r=[],f={_version:"3.5.0",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,n){var s=this;setTimeout(function(){n(s[e])},0)},addTest:function(e,n,s){r.push({name:e,fn:n,options:s})},addAsyncTest:function(e){r.push({name:null,fn:e})}},Modernizr=function(){};Modernizr.prototype=f,Modernizr=new Modernizr,Modernizr.addTest("passiveeventlisteners",function(){var n=!1;try{var s=Object.defineProperty({},"passive",{get:function(){n=!0}});e.addEventListener("test",null,s)}catch(o){}return n});var l=n.documentElement,c="svg"===l.nodeName.toLowerCase();a(),t(i),delete f.addTest,delete f.addAsyncTest;for(var u=0;u<Modernizr._q.length;u++)Modernizr._q[u]();e.Modernizr=Modernizr}(window,document);
</script>
<div id="fixed-content" class="js-isolated-scroll fixed">
<p class="p-in-fixed">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates.</p>
</div>
<p class="p-in-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates.</p>
Or, Am I making things unnecessarily complicated because as it can be achieved just by using CSS?
Update1:
This is a pure css option for webkit browsers using the ::-webkit-scrollbar property.
body{
position: relative;
background-color: #ccc !important;
padding: 20px 20px 20px 50%;
}
.fixed {
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
padding: 20px;
overflow: auto;
position: fixed;
border: 1px solid #333;
width: calc(50% - 70px);
background-color: #f8f8f8;
}
.fixed::-webkit-scrollbar {
width: 0px;
background: transparent;
}
<div class="js-isolated-scroll fixed">
<p class="p-in-fixed">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<p class="p-in-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
Would something like this work? When you hover over the scrolling div, toggle a class on the body or other parent element that has an overflow of hidden, thus preventing parent scroll using CSS.
$('.js-isolated-scroll').bind('mouseenter mouseleave touchstart touchend',
function() {
$("body").toggleClass("no-scroll");
});
body{
position: relative;
background-color: #ccc !important;
padding: 20px 20px 20px 50%;
}
.fixed {
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
padding: 20px;
overflow: auto;
position: fixed;
border: 1px solid #333;
width: calc(50% - 40px);
background-color: #f8f8f8;
}
.no-scroll {
overflow: hidden;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fixed-content" class="js-isolated-scroll fixed">
<p class="p-in-fixed">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
Take a look at this fiddle.
The key trick in my answer is separating the two scrolls.
In your example, the body had the scroll so the fixed div had a container with scroll. By making a container element for the p-in-bodies which has the scroll, and placing the fixed-content outside of it, you can get around this.
HTML (added the container wrapper):
<div id="container">
<p class="p-in-body">...</p>
</div>
<div id="fixed-content" class="fixed">
<p class="p-in-fixed">...</p>
</div>
CSS (changed html, body & added #container):
html, body{
padding: 0;
width: 100%;
height: 100%;
}
.fixed {
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
padding: 20px;
overflow: auto;
position: absolute;
border: 1px solid #333;
width: calc(50% - 40px);
background-color: #f8f8f8;
}
#container{
position: relative;
background-color: #ccc !important;
padding: 20px 20px 20px 50%;
width: 100%;
height: 100%;
box-sizing: border-box;
overflow-y: auto;
}
I'm working on a website and I've the following code :
//SlideToggle
$('a').attr('href', 'javascript:void(0)');
$('a').click(function() {
$(this).next().slideToggle();
});
$('.container div').addClass('cf');
.hidden {
display: none;
}
.container {
width: 100%;
margin: 0 auto;
}
.container div {
width: 25%;
display: inline-block;
vertical-align: top;
text-align: center;
background: lightblue;
margin: 0 0 0.25em;
padding: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div>See more
<p class="hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia ipsam, dolorem illum. Amet officiis dignissimos eligendi excepturi nam, aliquid architecto atque nostrum illo. Ratione nesciunt, id nulla dolores? Blanditiis, praesentium.</p>
</div>
<div>See more
<p class="hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error sint nihil labore molestias expedita corrupti ipsa iusto iure sit nisi ab nobis maxime unde voluptates magni, distinctio quae. Deserunt, incidunt.</p>
</div>
<div>See more
<p class="hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt accusamus facilis tempore repellat eligendi accusantium laudantium quis, magni a soluta deleniti voluptatibus quam, est aliquid. Atque a, esse. Itaque, consequuntur.</p>
</div>
<div>See more
<p class="hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, quo, possimus. Quam odit laudantium, ex alias, repellat laborum quae nobis expedita aperiam iusto iure at facilis obcaecati doloribus quis earum.</p>
</div>
<div>See more
<p class="hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam ratione doloribus laborum deleniti quae cumque quasi, repellat, ex nemo nulla corporis voluptatum vel doloremque nesciunt cupiditate, veritatis excepturi vero harum.</p>
</div>
<div>See more
<p class="hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam cupiditate quisquam, dicta eligendi ut eos culpa nisi quod nesciunt vero soluta voluptates illo esse voluptatibus, ab, sint impedit repudiandae dolorum!</p>
</div>
</div>
The slideToggle is working well . However, when I slideToggle, I want this action only affect the div at the bottom and not the others. Let me show you what I want :
(I don't want to touch at div height, they have to stay like that)
Hope I'm clear. Thanks for your help !
This comes close, maybe someone is able to improve this..
//SlideToggle
$('a').attr('href','javascript:void(0)');
$('a').click(function() {
var $self = $(this);
var index = $self.parent().index();
$(this).next().slideToggle(100, function() {
var margin = $self.parent().toggleClass("active").find("p").outerHeight();
if($self.parent().hasClass("active")) {
$(".container div").eq(index + 3).css("margin-top", margin);
}
else {
$(".container div").eq(index + 3).css("margin-top", 0);
}
});
});
$('.container div').addClass('cf');
* {
box-sizing:border-box;
}
.hidden {
display: none;
}
.container {
width: 100%;
margin: 0 auto;
}
.container div {
width: 33.3333333333%;
display: inline-block;
vertical-align: top;
text-align: center;
background: lightblue;
margin:0;
padding: 25px;
position:relative;
-webkit-transition: ease-in-out, margin .1s ease-in-out;
transition: ease-in-out, margin .1s ease-in-out;
float:left;
}
.container div p {
position:absolute;
width:100%;
left:0;
padding:25px;
margin:0;
top:100%;
background: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div>See more
<p class="hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia ipsam, dolorem illum. Amet officiis dignissimos eligendi excepturi nam, aliquid architecto atque nostrum illo. Ratione nesciunt, id nulla dolores? Blanditiis, praesentium.</p>
</div>
<div>See more
<p class="hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error sint nihil labore molestias expedita corrupti ipsa iusto iure sit nisi ab nobis maxime unde voluptates magni, distinctio quae. Deserunt, incidunt.</p>
</div>
<div>See more
<p class="hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt accusamus facilis tempore repellat eligendi accusantium laudantium quis, magni a soluta deleniti voluptatibus quam, est aliquid. Atque a, esse. Itaque, consequuntur.</p>
</div>
<div>See more
<p class="hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, quo, possimus. Quam odit laudantium, ex alias, repellat laborum quae nobis expedita aperiam iusto iure at facilis obcaecati doloribus quis earum.</p>
</div>
<div>See more
<p class="hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam ratione doloribus laborum deleniti quae cumque quasi, repellat, ex nemo nulla corporis voluptatum vel doloremque nesciunt cupiditate, veritatis excepturi vero harum.</p>
</div>
<div>See more
<p class="hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam cupiditate quisquam, dicta eligendi ut eos culpa nisi quod nesciunt vero soluta voluptates illo esse voluptatibus, ab, sint impedit repudiandae dolorum!</p>
</div>
</div>
Try this :
Hide all the p tag before do Slide toggle.
$('a').click(function() {
$('p').hide();
$(this).next().slideToggle();
});