Transition time to navbar when Scroll-Up - javascript
I have this test page.
I added some JS to make the nav bar hide and show based on scrolling up or down, and that's fine, everything is working, except:
When I scroll down, so the navbar APPEARS, it has transition: all 3s; (I set it to 3 seconds so it's obvious), but when I scroll down, so the the navbar DISAPPEARS, the transition time doesn't apply.
NOTE: I noticed that the more transition time I give to the navbar when I scroll down, the more transition time will have when I scroll up, but only in proportion:
EXAMPLE: If I give the navbar transition: all 3s; when it disappears will have something like .5 seconds of transition, if I give it transition: all 6s; when it disappears will have something like 1 second of transition. So if I want to set a reasonable transition time like transtion: 1s; or transition: .5s;, when I scroll up the navbar's transition will appear to be instantaneously.
What can I do?
let toggleButton = document.getElementById('burger')
let navBarLinks = document.getElementById('nav1')
toggleButton.addEventListener('click', () => {
navBarLinks.classList.toggle('active')
})
const nav = document.querySelector('header');
let prevScrollpos = window.pageYOffset;
window.addEventListener('scroll', () => {
let currentScrollpos = window.pageYOffset;
if (prevScrollpos < currentScrollpos) {
nav.classList.add('hide');
}
else {
nav.classList.remove('hide');
}
prevScrollpos = currentScrollpos;
})
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
}
:root {
font-size: 15px;
}
/* ↓ ↓ ↓ */
header {
overflow-x: hidden;
transition: all 3s;
transform: translateY(0%);
position: fixed;
z-index: 5;
}
.thing {
position: relative;
top: 64px;
}
header.hide {
transform: translateY(-100%);
}
/* ↑ ↑ ↑ */
.logoandburger {
display: flex;
width: 100vw;
justify-content: space-between;
align-items: center;
background: linear-gradient(45deg,lightpink,powderblue);
padding: 1em 1.5em;
position: relative;
z-index: 2;
}
.burger {
position: absolute;
left: 85%;
}
.bubbles {
position: relative;
top: -8px;
left: -20px;
display: none;
}
#keyframes bubbly {
from {
transform: scale(.5);
opacity: 0;
}
to {
transform: scale(1.9);
opacity: 1;
}
}
.burger:active ~ .bubbles {
display: block;
animation: bubbly .2s linear;
}
.nav1 {
background: linear-gradient(45deg,powderblue,lightpink);
text-align: center;
transform: translatex(100%) translateY(-110%);
transition: .5s;
}
.nav1.active {
transform: translatex(0%) translatey(0%);
}
ul {
line-height: 2.5em;
padding: 1em 0;
}
a {
color: black;
font-family: verdana;
font-size: 1.2rem;
}
<header id="nav2">
<div class="logoandburger">
<h1 class="logo">Logo</h1>
<img src="menu.svg" class="burger" id="burger" width="35px;" alt="menu icon">
<img src="bubble.svg" class="bubbles" width="30px" alt="">
</div>
<nav class="nav1" id="nav1">
<ul class="nav">
<li>Home</li>
<li>Products</li>
<li>About Us</li>
<li>Contacts</li>
</ul>
</nav>
</header>
<h1 class="thing">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas o illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas o illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas o illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus volupt</h1>
<script src="main.js">
</script>
It looks to me like your header is traveling 100% of the body height to get to it's position, which is why it's taking so long. Try setting transform: translateY(); to a set pixel value to check the difference. Or check the header height programmatically and specify the distance that way.
Example:
header {
overflow-x: hidden;
transition: all 1s;
transform: translateY(-200px);
position: fixed;
z-index: 5;
}
Run example below:
let toggleButton = document.getElementById('burger')
let navBarLinks = document.getElementById('nav1')
toggleButton.addEventListener('click', () => {
navBarLinks.classList.toggle('active')
})
const nav = document.querySelector('header');
let prevScrollpos = window.pageYOffset;
window.addEventListener('scroll', () => {
let currentScrollpos = window.pageYOffset;
if (prevScrollpos < currentScrollpos) {
nav.classList.add('hide');
}
else {
nav.classList.remove('hide');
}
prevScrollpos = currentScrollpos;
})
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
}
:root {
font-size: 15px;
}
/* ↓ ↓ ↓ */
header {
overflow-x: hidden;
transition: all 1s;
transform: translateY(0%);
position: fixed;
z-index: 5;
}
.thing {
position: relative;
top: 64px;
}
header.hide {
transform: translateY(-100px);
}
/* ↑ ↑ ↑ */
.logoandburger {
display: flex;
width: 100vw;
justify-content: space-between;
align-items: center;
background: linear-gradient(45deg,lightpink,powderblue);
padding: 1em 1.5em;
position: relative;
z-index: 2;
}
.burger {
position: absolute;
left: 85%;
}
.bubbles {
position: relative;
top: -8px;
left: -20px;
display: none;
}
#keyframes bubbly {
from {
transform: scale(.5);
opacity: 0;
}
to {
transform: scale(1.9);
opacity: 1;
}
}
.burger:active ~ .bubbles {
display: block;
animation: bubbly .2s linear;
}
.nav1 {
background: linear-gradient(45deg,powderblue,lightpink);
text-align: center;
transform: translatex(100%) translateY(-110px);
transition: .5s;
}
.nav1.active {
transform: translatex(0%) translatey(0%);
}
ul {
line-height: 2.5em;
padding: 1em 0;
}
a {
color: black;
font-family: verdana;
font-size: 1.2rem;
}
<header id="nav2">
<div class="logoandburger">
<h1 class="logo">Logo</h1>
<img src="menu.svg" class="burger" id="burger" width="35px;" alt="menu icon">
<img src="bubble.svg" class="bubbles" width="30px" alt="">
</div>
<nav class="nav1" id="nav1">
<ul class="nav">
<li>Home</li>
<li>Products</li>
<li>About Us</li>
<li>Contacts</li>
</ul>
</nav>
</header>
<h1 class="thing">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas o illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas o illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas o illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus volupt</h1>
<script src="main.js">
</script>
When left undeclared, transition-timing-function defaults to the value ease-out.
In one of your transitions, you are seeing the end of the animated transition and in the other transition, you are seeing the beginning. Evidently these are not similar, because ease-out is not a symmetrical timing-function.
To counter-act this, we can explicitly declare the transition-timing-function as linear, like this:
transition: all 0.6s linear;
Further Reading:
https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function
Working Example:
let toggleButton = document.getElementById('burger')
let navBarLinks = document.getElementById('nav1')
toggleButton.addEventListener('click', () => {
navBarLinks.classList.toggle('active')
})
const nav = document.querySelector('header');
let prevScrollpos = window.pageYOffset;
window.addEventListener('scroll', () => {
let currentScrollpos = window.pageYOffset;
if (prevScrollpos < currentScrollpos) {
nav.classList.add('hide');
}
else {
nav.classList.remove('hide');
}
prevScrollpos = currentScrollpos;
})
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
}
:root {
font-size: 15px;
}
/* ↓ ↓ ↓ */
header {
overflow-x: hidden;
transition: all 0.6s linear;
transform: translateY(0);
position: fixed;
z-index: 5;
}
.thing {
position: relative;
top: 64px;
}
header.hide {
transform: translateY(-75px);
}
/* ↑ ↑ ↑ */
.logoandburger {
display: flex;
width: 100vw;
justify-content: space-between;
align-items: center;
background: linear-gradient(45deg,lightpink,powderblue);
padding: 1em 1.5em;
position: relative;
z-index: 2;
}
.burger {
position: absolute;
left: 85%;
}
.bubbles {
position: relative;
top: -8px;
left: -20px;
display: none;
}
#keyframes bubbly {
from {
transform: scale(.5);
opacity: 0;
}
to {
transform: scale(1.9);
opacity: 1;
}
}
.burger:active ~ .bubbles {
display: block;
animation: bubbly .2s linear;
}
.nav1 {
background: linear-gradient(45deg,powderblue,lightpink);
text-align: center;
transform: translatex(100%) translateY(-110%);
transition: .5s;
}
.nav1.active {
transform: translatex(0%) translatey(0%);
}
ul {
line-height: 2.5em;
padding: 1em 0;
}
a {
color: black;
font-family: verdana;
font-size: 1.2rem;
}
<header id="nav2">
<div class="logoandburger">
<h1 class="logo">Logo</h1>
<img src="menu.svg" class="burger" id="burger" width="35px;" alt="menu icon">
<img src="bubble.svg" class="bubbles" width="30px" alt="">
</div>
<nav class="nav1" id="nav1">
<ul class="nav">
<li>Home</li>
<li>Products</li>
<li>About Us</li>
<li>Contacts</li>
</ul>
</nav>
</header>
<h1 class="thing">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas o illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas o illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas o illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus volupt</h1>
<script src="main.js">
</script>
Related
How to set CSS to move the block when sliding down the webpage?
I am a beginner in programming, I have a problem and want to ask you!
At present, there is a layout that the green area appears on the left side, such as area A in the picture, but when the mouse slides down, the green area is about to become area B in the picture.
But I don’t know how to make such a change, no Know if someone can give me a little help? thanks
* {
border: 1px solid #222;
}
html {
background-color: #ccc;
}
.content {
margin: auto;
display: flex;
justify-content: center;
max-width: 600px;
}
.content .main {
flex: 2;
background-color: #f80d77;
padding: 20px;
line-height: 1.6;
}
.content .main .title {
font-size: 60px;
height: 100px;
background-color: #71ff05;
margin-bottom: 20px;
padding: 10px;
}
.content .side {
flex: 1;
}
.content .side .side_wrap {
background-color: #ff5b0f;
padding: 20px;
}
<div class="warp">
<div class="content">
<div class="main">
<div class="title">TITLE</div>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officia libero explicabo est hic illo! Beatae, optio molestiae, debitis itaque in ullam odio corporis neque delectus facilis nobis omnis. Cum voluptatem vel, accusantium repellendus consectetur facilis dolore possimus deleniti corporis placeat iure exercitationem fugiat repellat ipsa eaque? Quam alias, sit corporis earum doloremque eos et voluptatem tempora, similique mollitia pariatur suscipit porro reprehenderit ea ut in quidem! Deleniti soluta nostrum at quidem itaque, maxime enim sint sequi recusandae possimus dicta natus quo harum! Veniam ut dolorem, laboriosam mollitia ab quasi non ratione officia iure, nam, molestiae sunt pariatur explicabo cupiditate deserunt?
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officia libero explicabo est hic illo! Beatae, optio molestiae, debitis itaque in ullam odio corporis neque delectus facilis nobis omnis. Cum voluptatem vel, accusantium repellendus consectetur facilis dolore possimus deleniti corporis placeat iure exercitationem fugiat repellat ipsa eaque? Quam alias, sit corporis earum doloremque eos et voluptatem tempora, similique mollitia pariatur suscipit porro reprehenderit ea ut in quidem! Deleniti soluta nostrum at quidem itaque, maxime enim sint sequi recusandae possimus dicta natus quo harum! Veniam ut dolorem, laboriosam mollitia ab quasi non ratione officia iure, nam, molestiae sunt pariatur explicabo cupiditate deserunt?
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officia libero explicabo est hic illo! Beatae, optio molestiae, debitis itaque in ullam odio corporis neque delectus facilis nobis omnis. Cum voluptatem vel, accusantium repellendus consectetur facilis dolore possimus deleniti corporis placeat iure exercitationem fugiat repellat ipsa eaque? Quam alias, sit corporis earum doloremque eos et voluptatem tempora, similique mollitia pariatur suscipit porro reprehenderit ea ut in quidem! Deleniti soluta nostrum at quidem itaque, maxime enim sint sequi recusandae possimus dicta natus quo harum! Veniam ut dolorem, laboriosam mollitia ab quasi non ratione officia iure, nam, molestiae sunt pariatur explicabo cupiditate deserunt?
</div>
<div class="side">
<ul class="side_wrap">
<li>Lorem ipsum dolor sit.</li>
<li>Lorem ipsum dolor sit.</li>
<li>Lorem ipsum dolor sit.</li>
<li>Lorem ipsum dolor sit.</li>
<li>Lorem ipsum dolor sit.</li>
<li>Lorem ipsum dolor sit.</li>
</ul>
</div>
</div>
</div>
Use position:sticky; with element. You could use this as reference.
The scrolltop of page is changed when I hide the element
The scrolltop of page is changed when I move scroll a little and hide element.
(if scrolltop is 0, it doesn't happen). Condition is
property of the element's parents is {position: absolute; bottom:0; right: 0} and I move scroll of page.
Then the scrolltop move to bottom.
Why it happen?
$('button.close').on('click', function(){
$('.layer-content').css({display: 'none'})
});
$('button.show').on('click', function(){
$('.layer-content').show()
});
* {
margin: 0;padding: 0;
}
.parent {
position:relative;
height: 300px;
background: #d0d0d0;
}
.parent .layer {
position: absolute;
bottom: 0;
right: 0;
width: 500px;
background: #c0c0c0;
}
.parent .layer button {
position: absoulte;
top: 0;
right: 0
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
<button class="show">show</button>
<div class="layer">
<div class="layer-content">
<button class="close">close</button>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint dolore necessitatibus cupiditate maiores, optio aut. A nisi possimus voluptate velit, voluptates repellendus dolorum, totam quia fuga neque, provident vel tempore?
</div>
</div>
</div>
<div>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam, ex reprehenderit voluptatem velit totam, modi quae saepe ipsum tempora, vero labore. Minima voluptatem repudiandae accusantium fugiat veniam recusandae facere beatae.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam, ex reprehenderit voluptatem velit totam, modi quae saepe ipsum tempora, vero labore. Minima voluptatem repudiandae accusantium fugiat veniam recusandae facere beatae.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam, ex reprehenderit voluptatem velit totam, modi quae saepe ipsum tempora, vero labore. Minima voluptatem repudiandae accusantium fugiat veniam recusandae facere beatae.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam, ex reprehenderit voluptatem velit totam, modi quae saepe ipsum tempora, vero labore. Minima voluptatem repudiandae accusantium fugiat veniam recusandae facere beatae.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam, ex reprehenderit voluptatem velit totam, modi quae saepe ipsum tempora, vero labore. Minima voluptatem repudiandae accusantium fugiat veniam recusandae facere beatae.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam, ex reprehenderit voluptatem velit totam, modi quae saepe ipsum tempora, vero labore. Minima voluptatem repudiandae accusantium fugiat veniam recusandae facere beatae.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam, ex reprehenderit voluptatem velit totam, modi quae saepe ipsum tempora, vero labore. Minima voluptatem repudiandae accusantium fugiat veniam recusandae facere beatae.
</div>
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
HTML Side by Side Paragraph's
I am unable to present two paragraph's side by side without compromising the entire format. Here is a video that better explains the issue: Video Link to Code Link to Site
https://jsfiddle.net/1L5emghf/
CSS:
.app {
max-width: 1000px;
margin: 0 auto;
}
.app:after {
clear:both;
}
p {
display: block;
width: calc(50% - 10px);
float: left;
margin: 5px;
background-color: #CCC;
border: 3px;
padding: 20px;
box-sizing: border-box;
}
p:nth-child(even) {
float: right;
}
Is this the solution to your problem? If you want to have the same height against the underlying element use JS (you need to give the sibling a minimum height relative to the active element)
Full solution with JS
https://jsfiddle.net/1L5emghf/1/
HTML:
<div class="app">
<p contenteditable>1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto vero officia id fugit accusantium unde, minima assumenda veniam deleniti perferendis.</p>
<p contenteditable>2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor qui veritatis esse voluptatum, asperiores, quam tenetur quae porro voluptatibus facilis debitis est iure recusandae voluptates. Modi sapiente maxime libero deleniti ad excepturi nam natus iusto, doloribus esse vel, recusandae repellendus iste officiis quis cupiditate blanditiis perspiciatis, facere animi. Sunt, praesentium.</p>
<p contenteditable>3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere omnis illum aperiam voluptates error doloremque quam, totam minima corrupti doloribus magni eaque velit ex? Eveniet praesentium, delectus cumque ullam velit dicta dolorum maiores, consequatur fugit nam nulla, quas veniam tempore repellendus voluptate! Cumque adipisci nesciunt quae iste esse commodi? Minima placeat, tempora ea harum ipsam vitae? Velit laudantium quibusdam iure facilis repellendus perspiciatis temporibus maiores necessitatibus alias, amet delectus quidem quia iusto eos eveniet explicabo modi voluptatibus sit harum aut provident corporis! Culpa soluta sunt, sapiente quasi officiis aliquid vitae, repellendus, repellat consectetur voluptatem, sed quas. Modi quod ab voluptatem debitis nulla eum, in, repellat cupiditate, eos voluptas quae commodi ut incidunt sapiente soluta doloribus consequuntur saepe. Officiis deserunt ab iste quae ullam cupiditate quis possimus, incidunt, voluptates distinctio doloremque dignissimos dicta dolore quo sit. Ullam asperiores maiores aliquam sint facere cumque quidem reiciendis natus, quo nobis quod aspernatur rem sapiente ipsum, voluptatibus tenetur non id modi adipisci sunt quae provident unde in! Esse placeat et recusandae nobis iste magni dolorem assumenda similique. Tempora magni repellat, fugiat officiis quam error non quisquam blanditiis nesciunt sint consectetur dolorem voluptates sed ipsum unde. At amet culpa excepturi possimus officiis magnam, accusantium fugit cupiditate voluptatibus harum explicabo quia vitae dolorum quam beatae, eveniet! Pariatur blanditiis iusto, est porro earum neque aperiam. Laudantium minima officia dolorem sit, enim blanditiis eius aspernatur dolor, assumenda, possimus ut hic id veniam unde odit nesciunt, explicabo odio vero ex! Ipsam velit, cupiditate nisi accusamus facilis aliquid ad ab omnis eveniet dolorem quaerat ea officia, necessitatibus quasi porro doloremque quis, rerum eligendi consectetur suscipit. Enim, fugiat, non? Suscipit dolorum nam assumenda nisi ipsa, voluptatum incidunt reprehenderit dolor molestiae dolores quae adipisci, dignissimos nobis illum praesentium architecto. Libero omnis velit, nihil, est consequuntur natus accusantium. Cumque numquam modi tenetur iste.</p>
<p contenteditable>4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem praesentium consequatur quisquam facilis, magnam consequuntur asperiores optio architecto facere, obcaecati qui omnis cupiditate aspernatur repellat inventore illum similique placeat quas?</p>
<p contenteditable>5 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit sint consequuntur non corporis hic vero ut ipsam reprehenderit rerum unde.</p>
<p contenteditable>6 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa quis quibusdam eveniet soluta, iure dolor assumenda a aliquid autem sed tempora dignissimos laudantium? Ipsa maiores dolorum, optio temporibus iste dolore est nobis aspernatur placeat numquam eos fuga rerum quae sed.</p>
<p contenteditable>7 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto debitis beatae recusandae. Provident ea aut quia nemo corporis et unde iure dignissimos assumenda sed corrupti illum, harum, itaque ad ipsum.</p>
</div>
JS:
let els = document.querySelectorAll('[contenteditable]');
function syncHeight(activeEl, siblingEl) {
siblingEl.style.minHeight = activeEl.offsetHeight + 'px';
}
function prepare(el) {
let height = el.offsetHeight;
let even = !!(Array.prototype.slice.call(el.parentNode.children).indexOf(el)%2);
if(even) {
syncHeight(el, el.previousElementSibling);
} else {
if(el.nextElementSibling) {
syncHeight(el, el.nextElementSibling);
}
}
}
for(let el of els) {
prepare(el);
el.addEventListener('input', function(e) {
prepare(el);
});
}
Since all the paragraphs are using relative positions, you can set max-width / overflow-y styles for them :
CSS
p { max-height: 154px; overflow-y: scroll; }
Inline Styles
<p styles= "max-height: 154px; overflow-y: scroll; <....>" > mmmmmmmmm </p>
Incase paragraph widths are also being affected, add max-width: 483px; overflow-x: hidden; properties
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();
});