We Keep Coding

Vue JS - How to add pixels on the left side when scrolling

I want to make it so that when scrolling, the block with the block-1 class changes its position to the right, that is, when scrolling, it moves to the right by 1 pixel
Here is the given code in codesandbox
<template>
<div>
<div class="scroll-block">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat quod at
vitae explicabo unde expedita ullam, excepturi accusantium aut aperiam
adipisci consectetur corrupti, perspiciatis, earum ad modi recusandae
numquam tenetur! Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Corrupti distinctio architecto deleniti quas nihil. Illum possimus
accusamus quibusdam quis, repudiandae labore laboriosam nihil odit, vitae
ratione numquam quod cumque aut.
</div>
<div class="block-1"></div>
</div>
</template>
<style scoped>
.scroll-block {
width: 200px;
overflow: scroll;
height: 200px;
background: red;
}
.block-1 {
width: 100px;
height: 100px;
background: yellow;
}
</style>

Just handle scrolling event and change the box position.
<template>
<div>
<div class="scroll-block" #scroll="onScroll">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat quod at
vitae explicabo unde expedita ullam, excepturi accusantium aut aperiam
adipisci consectetur corrupti, perspiciatis, earum ad modi recusandae
numquam tenetur! Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Corrupti distinctio architecto deleniti quas nihil. Illum possimus
accusamus quibusdam quis, repudiandae labore laboriosam nihil odit, vitae
ratione numquam quod cumque aut.
</div>
<div class="block-1" :style="block1Style"></div>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: String,
},
data() {
return {
block1Left: 0,
timerId: null,
}
},
computed: {
block1Style() {
return {
left: `${this.block1Left}px`,
}
}
},
methods: {
onScroll() {
this.block1Left++;
}
}
};
</script>
<style scoped>
.scroll-block {
width: 200px;
overflow: scroll;
height: 200px;
background: red;
}
.block-1 {
width: 100px;
height: 100px;
background: yellow;
position: relative;
}
</style>

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

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 ?

ScrollMagic element is being triggered on page load automatically

I have a graphic element positioned at the bottom center of my page that is supposed to fade-in when you start scrolling down.
I am using ScrollMagic JS
The problem is that element is being displayed automatically whenever I reload the page and then fades out. And after I start scrolling down, it fades back in again and starts working normally.
I need to hide on initial page load.
How may I achieve that? Because adding display: none to the element simply hides it all together.
I would also like to use a different kind of animation, instead of ease-out in CSS, I would like to use something that makes the graphic element to look like as it is rising up and rising down.
Similar to this site here: http://lempens-design.com/
DEMO https://jsfiddle.net/jtLo27op/3/
HTML
<div class="intro">
<div class="background_image"></div>
<div class="container-fluid height100">
<div class="row height100">
<div class="col-md-12 text-center height100">
<img src="assets/img/logo.png" alt="Logo" class="logo">
<div id="animate" class="city-vector">
<img src="assets/img/skyline.png" alt="Skyline" class="skyline">
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut!</h1>
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut!</h1>
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut!</h1>
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut!</h1>
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut!</h1>
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut!</h1>
</div>
</div>
CSS
html, body {
width: 100%;
height: 100%;
}
body {
background-color: #191617;
}
.height100 {
height: 100%;
}
.logo {
width: 220px;
margin-top: 10em;
}
.skyline {
display: block;
max-width: 100%;
position: absolute;
bottom:0;
left:50%;
transform:translateX(-50%);
}
.city-vector {
opacity: 1;
transition: all 3s ease-out;
}
.city-vector.fade-in {
opacity: 0;
}
.intro {
height: 100%;
position: relative;
overflow: hidden;
}
.intro::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url('../img/bg/bg5.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
transform: scale(1.01);
}
Javascript
$(document).ready(function() {
var controller = new ScrollMagic.Controller();
var ourScene = new ScrollMagic.Scene({
triggerElement: '#animate',
duration: 361
})
.setClassToggle('#animate', 'fade-in')
.addTo(controller);
});

You have to change your CSS code:
.city-vector {
opacity: 0;
transition: all 3s ease-out;
}
.city-vector.fade-in {
opacity: 1;
}
Updated JSfiddle
UPDATE: Okay, for the function you want, you don't need any external libraries. I don't have any experience with ScrollMagic, so I just didn't use it. I've also added the animation that makes it "rise out of the page" through CSS.
JSfiddle
jQuery
$(document).ready(function() {
$(window).scroll(function() { //run function every time window is scrolled
var scroll = $(window).scrollTop(); //find how much is scrolled from top
if (scroll > 0) { // if the scroll from top is greater than zero...
$("#animate").addClass("fade-in"); //then add class
} else { // if the scroll from top is not greater than zero...
$("#animate").removeClass("fade-in"); //then remove class
}
});
});
CSS animation:
.skyline {
display: block;
max-width: 100%;
position: absolute;
bottom: 0;
opacity: 0; /* I removed this in update */
transition: all 3s ease-out; /* Changed animation duration to 0.5s */
left: 50%;
transform: translate(-50%, 100%);
}
.city-vector.fade-in .skyline {
transform: translate(-50%);
opacity: 1; /* and this */
}
UPDATE: New JSfiddle with "snappish" effect.

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