How to delete a class, if scrollTop == 0?
Now when you scroll down the page, the navbar works as it should.
But when I scroll the page to the top itself - the class is not deleted. Tell me how to do in this situation.
My code
var navbar = document.querySelector('.navbar');
var scrollTop = window.pageYOffset;
var body = document.querySelector('body');
window.onscroll = function() {
if (window.pageYOffset > scrollTop) {
navbar.classList.add('slideUp');
body.classList.remove('styling');
navbar.classList.remove('styling');
} else if (window.pageYOffset < scrollTop) {
body.classList.add('styling');
navbar.classList.add('styling');
navbar.classList.remove('slideUp');
}
scrollTop = window.pageYOffset;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
padding-top: 80px;
min-height: 2000px;
}
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #00f;
height: 80px;
transition: transform .5s ease;
}
.navbar.styling {
height: 60px;
}
.navbar.slideUp {
transform: translateY(-100%);
}
<nav class="navbar"></nav>
Thank. I will be glad to any help
Just check scrollTop after its value has been updated from window.pageYOffset:
var navbar = document.querySelector('.navbar');
var scrollTop = window.pageYOffset;
var body = document.querySelector('body');
window.onscroll = function() {
if (window.pageYOffset > scrollTop) {
navbar.classList.add('slideUp');
body.classList.remove('styling');
navbar.classList.remove('styling');
} else if (window.pageYOffset < scrollTop) {
body.classList.add('styling');
navbar.classList.add('styling');
navbar.classList.remove('slideUp');
}
scrollTop = window.pageYOffset;
// Here
if (scrollTop === 0) {
body.classList.remove('styling');
navbar.classList.remove('styling');
}
console.log(`for scrollTop = ${scrollTop}, classes are:`, navbar.classList.value);
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
padding-top: 80px;
min-height: 2000px;
}
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #00f;
height: 80px;
transition: transform .5s ease;
}
.navbar.styling {
height: 60px;
}
.navbar.slideUp {
transform: translateY(-100%);
}
<nav class="navbar"></nav>
Related
I am working on small application
i want to display the div if the user scroll up to > 100px from the current position and hide div if the user scroll down to > 50 px from current postion
example code
myID = document.getElementById("myID");
var myScrollFunc = function() {
var y = window.scrollY;
if (y >= 200) {
myID.className = "bottomMenu show"
} else {
myID.className = "bottomMenu hide"
}
};
window.addEventListener("scroll", myScrollFunc);
body {
height: 2000px;
}
.bottomMenu {
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
border-top: 1px solid #000;
background: red;
z-index: 1;
transition: all 1s;
}
.hide {
opacity: 0;
left: -100%;
}
.show {
opacity: 1;
left: 0;
}
<div id="myID" class="bottomMenu hide"></div>
can any one help with code in javascript
Finded the way to solve this
first we want to get the scroll direction
and create two counter 1.upcounter 2. down counter
and if we start scroll up increase the upcounter and set down counter
to 0
and if we start scroll dow increase the downcounter and set up
counter to 0
if the up counter value reaches your value for example if reaches 100
display the div
and if the down counter reaches your value for example if reaches 50
hide the div
code example
myID = document.getElementById("myID");
function showSmartMenu() {
// current scroll position
var st = window.pageYOffset || document.documentElement.scrollTop;
// scrolling up
if (st < lastScrollTop) {
upCounter += 1;
downCounter = 0;
if (upCounter == 100) {
myID.className = "bottomMenu show"
}
} else { // scrolling down
downCounter -= 1;
upCounter = 0;
if (downCounter == -50) {
myID.className = "bottomMenu hide"
}
}
lastScrollTop = st <= 0 ? 0 : st;
}
var lastScrollTop = 0;
var upCounter = 0
var downCounter = 0
window.addEventListener("scroll", showSmartMenu)
body {
height: 2000px;
}
.bottomMenu {
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
border-top: 1px solid #000;
background: red;
z-index: 1;
transition: all 1s;
}
.hide {
opacity: 0;
left: -100%;
}
.show {
opacity: 1;
left: 0;
}
<div id="myID" class="bottomMenu hide"></div>
Trying to create a Scroll Indicator, which would not be horizontal, but vertical. The problem is that when I try to start scrolling the bar that indicated the position isn't scaling...
HTML
<div id="scrollbar">
<div id="bar">
</div>
<div>
CSS
#scrollbar
{
width: 1%;
height: 100%;
padding: 0;
margin: 0 0 0 auto;
right: 0;
top: 0;
position: fixed;
visibility: visible;
background-color: transparent;
}
#scrollbar #bar
{
width: inherit;
height: 0%;
background-color: #ccc;
}
JS
var bar = document.getElementById("bar");
window.onscroll = function () { scrollIndicator() };
window.onload = function () { scrollIndicator() };
function scrollIndicator()
{
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = 100;
if(height > 0)
{
scrolled = (winScroll / height) * 100;
}
bar.style.height = scrolled + "%";
}
I absolutely cannot find the problem...
your web page doesn't have enough content for it to scroll, hence scroll event isn't firing.
You need to fix the html, #scrollbar is missing a closing div tag and add enough content on the webpage so that it scrolls.
You also need to change the width of #bar from inherit to 100%.
var bar = document.getElementById("bar");
window.onscroll = function() {
scrollIndicator()
};
function scrollIndicator() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = 100;
if (height > 0) {
scrolled = (winScroll / height) * 100;
}
bar.style.height = scrolled + "%";
}
#scrollbar {
width: 1%;
height: 100%;
padding: 0;
margin: 0 0 0 auto;
right: 0;
top: 0;
position: fixed;
background-color: transparent;
}
#scrollbar #bar {
width: 100%;
height: 0%;
background-color: blue;
}
.section {
height: 100vh;
}
.section:nth-child(even) {
background: green;
}
.section:nth-child(odd) {
background: red;
}
<div id="scrollbar">
<div id="bar"></div>
</div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
I have a simple animation and I want to disable scrolling on the website
until this animation is done, it should be like a loader basically
UPDATE
thank you so much, but I have an issue with that sorry for not mention because I'm using a fixed position on a container to be fixed to do smooth scrolling, so when I use 'fixed' position for any element it doesn't seem to stick in the same place here is the full code
html
<main id="app">
<div id="scroll-container" class="scroll-container">
<div class="loader">
<div class="loader__block"></div>
</div>
</div>
</main>
CSS
body {
overflow-x: hidden;
overflow-y: scroll;
background: $bg-color;
user-select: none;
font-family: 'Platform Regular';
}
#app {
overflow: hidden;
position: fixed;
height: 100vh;
width: 100vw;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.scroll-container {
position: absolute;
overflow: hidden;
z-index: 10;
display: flex;
justify-content: center;
backface-visibility: hidden;
}
.loader {
width: 100vw;
height: 100vh;
position: absolute;
z-index: 999999;
overflow: hidden;
}
.loader__block {
position: absolute;
width: 0%;
height: 100vh;
background: #111111;
animation: go-left 4s cubic-bezier(.74, .06, .4, .92) forwards;
}
#keyframes go-left {
0% {
left: 0;
width: 0%;
}
50% {
left: 0;
width: 100%;
}
100% {
left: 100%;
width: 0;
}
these containers have a fixed position and overflow hidden because I'm making smooth page transition while scrolling and moving the 'y' position
here is also the js if it's going to help
function smoothScrolling() {
const html = document.documentElement;
const { body } = document;
const scroller = {
target: document.querySelector('#scroll-container'),
ease: 0.06, // <= scroll speed
endY: 0,
y: 0,
resizeRequest: 1,
scrollRequest: 0,
};
let requestId = null;
TweenLite.set(scroller.target, {
rotation: 0.01,
force3D: true,
});
function updateScroller() {
const resized = scroller.resizeRequest > 0;
if (resized) {
const height = scroller.target.clientHeight;
body.style.height = `${height}px`;
scroller.resizeRequest = 0;
}
const scrollY = window.pageYOffset || html.scrollTop || body.scrollTop || 0;
scroller.endY = scrollY;
scroller.y += (scrollY - scroller.y) * scroller.ease;
if (Math.abs(scrollY - scroller.y) < 0.05 || resized) {
scroller.y = scrollY;
scroller.scrollRequest = 0;
}
TweenLite.set(scroller.target, {
y: -scroller.y,
});
requestId = scroller.scrollRequest > 0 ? requestAnimationFrame(updateScroller) : null;
}
function onScroll() {
scroller.scrollRequest += 1;
if (!requestId) {
requestId = requestAnimationFrame(updateScroller);
}
}
function onResize() {
scroller.resizeRequest += 1;
if (!requestId) {
requestId = requestAnimationFrame(updateScroller);
}
}
function onLoad() {
updateScroller();
window.focus();
window.addEventListener('resize', onResize);
document.addEventListener('scroll', onScroll);
}
window.addEventListener('load', onLoad);
}
Use the CSS rule position: fixed; on your div with class loader which makes it to always stay in the same place even if the page is scrolled.
as so:
.loader {
width: 100vw;
height: 100vh;
position: absolute;
z-index: 999999;
overflow: hidden;
position: fixed;
}
.loader__block {
position: absolute;
width: 0%;
height: 100vh;
background: #111111;
animation: go-left 4s cubic-bezier(.74, .06, .4, .92) forwards;
}
#keyframes go-left {
0% {
left: 0;
width: 0%;
}
50% {
left: 0;
width: 100%;
}
100% {
left: 100%;
width: 0;
}
}
<main id="app">
<div id="scroll-container" class="scroll-container">
<div class="loader">
<div class="loader__block"></div>
</div>
</div>
In my scroll event listener I loop through all my .project elements then add or remove a class depending on their current position from the top of the viewport. I want to add a class to an element when it is at 80% of viewport height and remove it at 100% and 0%.
The logic I have should work fine, but the class rarely gets added at all.
var projects = document.querySelectorAll(".project");
var counter = document.getElementById("counter");
var viewH = window.innerHeight || document.documentElement.clientHeight;
window.addEventListener(
"scroll",
function() {
for (var i = 0; i < projects.length; i++) {
var project = projects[i];
// get dist from top of viewport
distTop = project.getBoundingClientRect().top;
distPercent = Math.round(distTop / viewH * 100);
// play at 80%
if (distPercent == "80") {
project.classList.add("play");
counter.innerHTML = i + 1;
}
// stop at 0%
if (distPercent == "0") {
project.classList.remove("play");
}
// stop if off screen
if (distPercent =="100") {
project.classList.remove("play");
}
}
},
false
);
window.addEventListener('resize', function () {
viewH = window.innerHeight || document.documentElement.clientHeight;
})
#half {
position:fixed;
top:50%;
height: 1px;
background: red;
width: 100%;
}
#projects {
padding-top:60vh;
width: 50vw;
margin: 0 auto;
}
#counter {
position: fixed;
top:20px;
left: 20px;
font-size:20px
}
.project {
background:pink;
height: 50vh;
width: 50vw;
margin-bottom:100px;
transition: background 0.3s ease-in-out;
}
.play {background:red}
* {
padding:0;
margin:0;
}
<div id="half"></div>
<div id="counter">0</div>
<div id="projects">
<div class="project">1</div>
<div class="project">2</div>
<div class="project">3</div>
<div class="project">4</div>
<div class="project">5</div>
</div>
I try to build a Slideshow in JS + CSS and it works pretty well except one visual glitch. The Transition to the last slides seems somehow broken.
But I couldn't figure out what the problem is. If I comment out the "offset" transition on the last slide, the error doesn't occure.
This is the codeine I am talking about: https://codepen.io/marianbreitmeyer/pen/paeYgZ
The Block of code I mentioned is this one:
const showNext = function() {
clicked = true;
for (i = 0; i <= slides.length-1; i++) {
if( parseInt(slides[i].style.zIndex) === slides.length) {
console.log(slides[i].innerHTML);
triggerAnimation(slides[i], 'offcanvas');
} else if (parseInt(slides[i].style.zIndex) === slides.length-1) {
//the line below triggers the problem
triggerAnimation(slides[i], 'offset');
}
}
};
Maybe someone with more experience could help me :)
Your code might be more simple:
const btn = document.getElementsByClassName('arrow')[0];
const slides = document.getElementsByClassName('slide');
slides[slides.length - 1].classList.add('offset', 'next');
btn.addEventListener("click", function(e) {
var o, n;
for (var i = 0; i < slides.length; i++) {
if (slides[i].classList.contains('offset')) {
slides[i].classList.remove('offset', 'next')
slides[i].classList.add('offcanvas');
o = (slides[i - 1] || slides[slides.length - 1]);
n = (slides[i - 2] || slides[slides.length + i - 2]);
}
if (slides[i].offsetLeft < -slides[i].offsetWidth) {
slides[i].classList.remove('offcanvas', 'next');
}
}
o.classList.add('offset');
n.classList.add('next');
}, false);
.container {
width: 100%;
height: 100vh;
background: brown;
position: relative;
}
body {
text-align: center;
font-size: 2rem;
}
.slide {
position: absolute;
top: 0;
left: 90%;
width: 100%;
height: 100%;
}
.slide:nth-child(1) {
background: pink;
}
.slide:nth-child(2) {
background: blue;
}
.slide:nth-child(3) {
background: green;
}
.slide:nth-child(4) {
background: grey;
}
.slide:nth-child(5) {
background: yellow;
}
.slide.next {z-index:1}
.slide.offset {
left: -10%;
z-index: 2;
transition: left .65s ease-in-out;
}
.slide.offcanvas {
left: -110%;
z-index: 2;
transition: left .65s ease-in-out;
}
.arrow {
position: absolute;
right: 5%;
top: 25px;
z-index: 9;
height: 50px;
width: 50px;
cursor: pointer;
}
.arrow:hover path {
transform: translate(16px, 0px);
}
path {
position: absolute;
top: 0;
left: 0;
transition: all .2s ease-in-out;
}
<div class="container">
<div class="slide">1 = pink</div>
<div class="slide">2 = blue</div>
<div class="slide">3 = green</div>
<div class="slide">4 = grey</div>
<div class="slide">5 = yellow</div>
<svg xmlns="http://www.w3.org/2000/svg" class="arrow"><path d="M19.443 5.17L30.138 15.5H-.095v1h30.233L19.443 26.829l.696.719L32.095 16 20.139 4.451z"/></svg>
</div>