Background resizing on scrolling in mobile browser - javascript

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>

Related

sticky navbar width not same

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

When scrolling down increment from 1 to 100

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>

scroll back to the top of a box on mouseout

Please, run this snippet to better understand my issue
body{
background-color: #E13241;
font-family: sans-serif;
font-weight: 300;
}
#wrapper{
width: 1130px;
margin: 100px auto;
}
.box1, .box2, .box3, .box4{
width: 230px;
height: 200px;
overflow: hidden;
float: left;
word-break: break-all;
word-spacing: -1px;
margin-left: 15px; /* or 0px */
background-color: rgba(25, 25, 25, 0.2);
padding: 15px;
transition: all 0.5s ease-in;
}
h3{
text-align: center;
}
.box1:hover, .box2:hover, .box3:hover, .box4:hover{
width: 230px;
height: 300px;
margin-top: -50px;
overflow-y: scroll;
}
::-webkit-scrollbar {width: 5px;}
::-webkit-scrollbar-track {background-color: rgba(25, 25, 25, 0.2);}
::-webkit-scrollbar-thumb {background-color: rgba(25, 25, 25, 0.2);}
<div id="wrapper">
<div class="box1">
<h3>
Title Box 1
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, beatae! Sed assumenda cupiditate quasi officiis laborum, minima at error tempore. Voluptatibus facere iste qui? Fugit non perferendis, accusamus nostrum deleniti?
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus consequuntur laborum porro nemo, quisquam minus minima eius, deserunt similique, laboriosam dolorum tenetur et repudiandae rem fugit illum perspiciatis nam totam.
</p>
</div>
<div class="box2">
<h3>
Title Box 2
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, beatae! Sed assumenda cupiditate quasi officiis laborum, minima at error tempore. Voluptatibus facere iste qui? Fugit non perferendis, accusamus nostrum deleniti?
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus consequuntur laborum porro nemo, quisquam minus minima eius, deserunt similique, laboriosam dolorum tenetur et repudiandae rem fugit illum perspiciatis nam totam.
</p>
</div>
<div class="box3">
<h3>
Title Box 3
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, beatae! Sed assumenda cupiditate quasi officiis laborum, minima at error tempore. Voluptatibus facere iste qui? Fugit non perferendis, accusamus nostrum deleniti?
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus consequuntur laborum porro nemo, quisquam minus minima eius, deserunt similique, laboriosam dolorum tenetur et repudiandae rem fugit illum perspiciatis nam totam.
</p>
</div>
<div class="box4">
<h3>
Title Box 4
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, beatae! Sed assumenda cupiditate quasi officiis laborum, minima at error tempore. Voluptatibus facere iste qui? Fugit non perferendis, accusamus nostrum deleniti?
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus consequuntur laborum porro nemo, quisquam minus minima eius, deserunt similique, laboriosam dolorum tenetur et repudiandae rem fugit illum perspiciatis nam totam.
</p>
</div>
</div>
So, I have a box within a div. When I hover it, the box gets higher and it is possible to scroll inside the box. But I can't figure a way to automatically scroll back to the top of the box when I do not hover the box anymore.
I've tried multiple things, including this js code I found in another answer :
$('#box').show();
$('#box').scrollTop(0);
$('html,body, #box').animate({scrollTop: 0}, 100);
But it's just cancelling all my css and do not work in this specific scenario.
Any idea or direction to follow ?

No scroll on hero until content is scrolled

I'm having difficulty creating this effect where the content in the hero is completely scrolled through (100% of the viewport) then the other sections of the page will show. I set it so the background is fixed. The stage div (which should be vertically centered) should come as you are scrolling with bottom padding separating and the second section should not show until fully scrolled. Not entirely sure what I am doing wrong. Code and codepen is below
http://codepen.io/anon/pen/xRPeJj
$(document).ready(function(){
var windowHeight = $(window).height();
$('#stage_1').css({"height": windowHeight + 'px'});
$('#stage_1').bind('scroll', function() {
if($(this).scrollTop() + $(this).innerHeight()>=$(this)[0].scrollHeight) {
$('.second-section').css("background-attachment", "scroll");
}
});
});
body, html {
height: 100%;
margin: 0;
}
.container {
padding: 0 1em;
margin: 0 auto;
width: 1000px;
}
.hero {
background-size: 100%;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
color: #fff;
background-image: url("http://www.jshiebert.com/wp-content/uploads/2015/12/photo-1424020128429-a60765861de1.jpg");
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
width: 100%;
height: 100vh;
flex-direction: column;
}
#stage_1 {
overflow: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hero">
<div class="container">
<div id="stage_1">
<div class="hero__text">
<h1>lorem to<span>the Rocks</span></h1>
<h2>Enter for your chance to explore the Rocky Mountains at River Stone Resort & lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam repudiandae nesciunt iusto eveniet! </h2>
</div>
</div>
<div id="stage_2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab fuga fugit, repellendus, reprehenderit itaque cum suscipit. Error magni, ipsum eligendi suscipit, rerum vero doloremque culpa, deleniti quae id repellat veniam?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus recusandae vel sed at repudiandae ipsam, natus laborum. Sit vitae eos labore, explicabo, blanditiis debitis aut dolor, nesciunt nam ratione temporibus.
</div>
</div>
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio ab, neque autem sequi maxime architecto praesentium aspernatur veritatis corporis voluptas vitae, nemo at mollitia aperiam! Reprehenderit facere esse officiis voluptas. Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Neque molestias hic nihil provident repellat, ad quas doloremque placeat consequuntur voluptatem, repellendus suscipit voluptate aspernatur ea! Voluptatem, est ducimus? Aliquam, voluptates. lorem Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Deleniti consequatur modi excepturi fuga corrupti, tempora, odit accusamus vitae ex, reiciendis maxime porro ipsa quisquam repudiandae, veritatis asperiores fugit. Eveniet, ipsam!Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Dolore fuga, dignissimos aperiam velit officiis cum voluptate deleniti praesentium at et aliquam natus, consequuntur dolorem repellendus eos mollitia libero esse omnis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto
maxime, delectus, quis eaque ex quibusdam impedit voluptate, in totam corporis repellat ipsa molestias minima vitae laborum explicabo possimus tempore dolore! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, facere iusto? Suscipit quisquam
excepturi facilis vel reprehenderit inventore perspiciatis autem dolore minima cumque. Dolores suscipit rem, accusantium perferendis vel deserunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora deserunt esse ab molestiae debitis aliquid
sunt assumenda laborum, laudantium, iste explicabo quae magni vel ipsum quas quos impedit sequi dicta!
</div>

Remove blank when slideToggle

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();
});

Categories