I am running a window scroll function to try and gauge when the div #home-cover1 is in view. Then when it is not in view for the code to run the else statement.
If you pull up your console, you will see that the else is never running and despite which div you are in it says #home-cover1 is in view.
Does anyone see why?
$(function() {
var section1 = $('#home-cover1');
if (section1.length) {
var oTop = section1.offset().top - window.innerHeight;
}
$(window).scroll(function() {
var pTop = $(document).scrollTop();
if (pTop > oTop) {
console.log("OVer it");
$('#proposal-trigger').removeClass('active');
}
else {
console.log("Nope it");
$('#proposal-trigger').addClass('active');
}
});
});
#home-cover1 {
background: green;
height: 100vh;
width: 100%;
}
#red {
background: red;
height: 100vh;
width: 100%;
}
#blue {
background: blue;
height: 100vh;
width: 100%;
}
#proposal-trigger {
background: #3B3B3B;
width: 100px;
height: 100px;
position: fixed;
bottom: 0;
right: 200px;
opacity: 0;
transition: ease 0.3s;-webkit-transition: ease 0.3s;
}
#proposal-trigger.active {
opacity: 1;
transition: ease 0.3s;-webkit-transition: ease 0.3s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="home-cover1"></section>
<section id="red"></section>
<section id="blue"></section>
<div id="proposal-trigger"></div>
After a quick check var oTop = section1.offset().top - window.innerHeight; results to a negative number therefore pTop is always greater than oTop. You have to subtract section1.offset() by window.innerHeight. You also have to switch pTop > oTop to pTop < oTop. This checks if scrollTop has gone below the section.
$(function() {
var section1 = $('#home-cover1');
if (section1.length) {
var oTop = window.innerHeight - section1.offset().top;
}
$(window).scroll(function() {
var pTop = $(document).scrollTop();
console.log(pTop);
console.log(oTop);
if (pTop < oTop) {
console.log("OVer it");
$('#proposal-trigger').removeClass('active');
}
else {
console.log("Nope it");
$('#proposal-trigger').addClass('active');
}
});
});
#home-cover1 {
background: green;
height: 100vh;
width: 100%;
}
#red {
background: red;
height: 100vh;
width: 100%;
}
#blue {
background: blue;
height: 100vh;
width: 100%;
}
#proposal-trigger {
background: #3B3B3B;
width: 100px;
height: 100px;
position: fixed;
bottom: 0;
right: 200px;
opacity: 0;
transition: ease 0.3s;-webkit-transition: ease 0.3s;
}
#proposal-trigger.active {
opacity: 1;
transition: ease 0.3s;-webkit-transition: ease 0.3s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="home-cover1"></section>
<section id="red"></section>
<section id="blue"></section>
<div id="proposal-trigger"></div>
Related
Javascipt
I would like for the character to jump over a new pokemon after each successful jump. Currently I can get the character to jump over the same pokemon over and over. How can I go about adding more pokemon for the character to jump. I was able to add a flying pokemon that dosent affect the games progress. But I want to add new pokemon that will affect the jump score.
var character = document.getElementById("character");
var block = document.getElementById("block");
var counter = 0;
const images = [
'https://www.serebii.net/swordshield/pokemon/001.png',
'https://www.serebii.net/swordshield/pokemon/002.png',
'https://www.serebii.net/swordshield/pokemon/003.png',
];
var index = 0;
function nextImage() {
index++;
index = index >= images.length ? images.length - 1 : index;
return images[index];
}
function jump() {
if (character.classList == "animate") {
return
}
character.classList.add("animate");
setTimeout(function() {
character.classList.remove("animate");
}, 300);
}
// document.querySelector("#block")function jump() {
// document.querySelector(images).src = nextImage();
// }
var checkDead = setInterval(function() {
let characterTop = parseInt(window.getComputedStyle(character).getPropertyValue("top"));
let blockLeft = parseInt(window.getComputedStyle(block).getPropertyValue("left"));
if (blockLeft < 20 && blockLeft > -20 && characterTop >= 130) {
block.style.animation = "none";
console.log("Game Over! Score: " + Math.floor(counter / 100));
counter = 0;
block.style.animation = "block 1s infinite linear";
} else {
counter++;
document.getElementById("scoreSpan").innerHTML = Math.floor(counter / 100);
}
}, 10);
* {
padding: 0;
margin: 0;
overflow-x: hidden;
}
h1 {
background-image: url(images/Gotta-Jumpem-All.png);
background-repeat: no-repeat;
margin-left: 450px;
width: 1200px;
height: 300px;
}
.game {
width: 500px;
height: 200px;
border: 1px solid black;
margin: auto;
margin-top: 5px;
background-image: url("https://p4.wallpaperbetter.com/wallpaper/957/704/964/pokemon-fields-ruby-1920x1200-nature-fields-hd-art-wallpaper-preview.jpg");
background-size: contain;
}
#character {
width: 50px;
height: 50px;
content: url("https://static.pokemonpets.com/images/monsters-images-300-300/100-Voltorb.webp");
position: relative;
top: 150px;
}
.animate {
animation: jump 0.3s linear;
}
#keyframes jump {
0% {
top: 150px;
}
30% {
top: 100px;
}
70% {
top: 100px;
}
100% {
top: 150px;
}
}
#block {
width: 50px;
height: 50px;
position: relative;
top: 110px;
left: 500px;
animation: block 1.3s infinite linear;
content: url("https://www.serebii.net/swordshield/pokemon/027.png");
}
#flyingPokemon {
width: 50px;
height: 50px;
position: relative;
top: -100px;
left: 500px;
animation: block 3s linear;
content: url("https://www.serebii.net/pokearth/sprites/pt/093.png");
}
#keyframes block {
0% {
left: 500px
}
100% {
left: -20px
}
}
p {
text-align: center;
}
<!DOCTYPE html>
<html lang="en" onclick="jump()">
<head>
<meta charset="UTF-8">
<title>Pokemon Jump</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1></h1>
<div class="game">
<div id="character"></div>
<div id="block"></div>
<div id="flyingPokemon"></div>
<div id="flyingPokemon2"></div>
</div>
<p>Score: <span id="scoreSpan"></span></p>
</body>
<script src="index.js"></script>
</html>
Here are some improvements
please use valid HTML
use eventlisteners
the nextImage was not called
the interval was not cleared (the thing still runs though)
const images = [
'https://www.serebii.net/swordshield/pokemon/001.png',
'https://www.serebii.net/swordshield/pokemon/002.png',
'https://www.serebii.net/swordshield/pokemon/003.png',
];
window.addEventListener("DOMContentLoaded", function() {
const character = document.getElementById("character");
const block = document.getElementById("block");
const message = document.getElementById("message");
let counter = 0,
index = 0;
function nextImage() {
index++;
if (index >= images.length) index = 0;
return images[index];
}
function jump() {
if (character.classList.contains("animate")) {
return
}
character.classList.add("animate");
setTimeout(function() {
character.classList.remove("animate");
block.style.content = `url(${nextImage()})`;
}, 300);
}
// document.querySelector("#block")function jump() {
// document.querySelector(images).src = nextImage();
// }
document.addEventListener("click", jump)
var checkDead = setInterval(function() {
let characterTop = parseInt(window.getComputedStyle(character).getPropertyValue("top"));
let blockLeft = parseInt(window.getComputedStyle(block).getPropertyValue("left"));
if (blockLeft < 20 && blockLeft > -20 && characterTop >= 130) {
block.style.animation = "none";
message.textContent = ("Game Over! Score: " + Math.floor(counter / 100));
counter = 0;
block.style.animation = "block 1s infinite linear";
clearInterval(checkDead);
} else {
counter++;
document.getElementById("scoreSpan").innerHTML = Math.floor(counter / 100);
}
}, 100);
})
* {
padding: 0;
margin: 0;
overflow-x: hidden;
}
h1 {
background-image: url(images/Gotta-Jumpem-All.png);
background-repeat: no-repeat;
margin-left: 450px;
width: 1200px;
height: 300px;
}
.game {
width: 500px;
height: 200px;
border: 1px solid black;
margin: auto;
margin-top: 5px;
background-image: url("https://p4.wallpaperbetter.com/wallpaper/957/704/964/pokemon-fields-ruby-1920x1200-nature-fields-hd-art-wallpaper-preview.jpg");
background-size: contain;
}
#character {
width: 50px;
height: 50px;
content: url("https://static.pokemonpets.com/images/monsters-images-300-300/100-Voltorb.webp");
position: relative;
top: 150px;
}
.animate {
animation: jump 0.3s linear;
}
#keyframes jump {
0% {
top: 150px;
}
30% {
top: 100px;
}
70% {
top: 100px;
}
100% {
top: 150px;
}
}
#block {
width: 50px;
height: 50px;
position: relative;
top: 110px;
left: 500px;
animation: block 1.3s infinite linear;
content: url("https://www.serebii.net/swordshield/pokemon/027.png");
}
#flyingPokemon {
width: 50px;
height: 50px;
position: relative;
top: -100px;
left: 500px;
animation: block 3s linear;
content: url("https://www.serebii.net/pokearth/sprites/pt/093.png");
}
#keyframes block {
0% {
left: 500px
}
100% {
left: -20px
}
}
p {
text-align: center;
}
<h1></h1>
<div class="game">
<div id="character"></div>
<div id="block"></div>
<div id="flyingPokemon"></div>
<div id="flyingPokemon2"></div>
</div>
<p>Score: <span id="scoreSpan"></span></p>
<p id="message"></p>
I've been wrestling with this problem for a while without success, so I'm hoping someone with greater knowledge can offer a solution.
By using a script to independently control the scroll speeds of specific divs, I've managed to create an effect along the lines of parallax scrolling:
https://neilwhitedesign.co.uk/pt_testing_area/index(scrolling).html
However, what I would also like to add, is a second script to reduce the size of the logo when the page is scrolls:
https://neilwhitedesign.co.uk/pt_testing_area/index(headershrink).html
Independently, these scripts are working exactly as I want them, but when I try to combine the two, there is a conflict and only the scrolling effect works.
Looking at similar questions posted previously, one solution was to add a further script between the two, to call a noConflict.
However, while adding this now makes the shrinking image effect work, it does so at the expense of the scrolling effect.
Is what I'm trying to achieve possible?
Is there a simple solution to get around the conflict?
Please find my html and css below:
HTML
window.onscroll = function() {
growShrinkLogo()
};
var Logo = document.getElementById("Logo");
var endOfDocumentTop = 90;
var size = 0;
function growShrinkLogo() {
var scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 90;
if (size == 0 && scroll > endOfDocumentTop) {
Logo.className = 'smallLogo';
size = 1;
} else if (size == 1 && scroll <= endOfDocumentTop) {
Logo.className = 'largeLogo';
size = 0;
}
}
$.fn.moveIt = function() {
var $window = $(window);
var instances = [];
$(this).each(function() {
instances.push(new moveItItem($(this)));
});
window.onscroll = function() {
var scrollTop = $window.scrollTop();
instances.forEach(function(inst) {
inst.update(scrollTop);
});
}
}
var moveItItem = function(el) {
this.el = $(el);
this.speed = parseInt(this.el.attr('data-scroll-speed'));
};
moveItItem.prototype.update = function(scrollTop) {
var pos = scrollTop / this.speed;
this.el.css('transform', 'translateY(' + +pos + 'px)');
};
$(function() {
$('[data-scroll-speed]').moveIt();
});
#charset "utf-8";
/* CSS Document */
/* 2. Clearfix*/
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1
}
/* 3. Images*/
a img {
border: none;
}
img {
max-width: 100%;
vertical-align: middle;
}
/* 4. Structure*/
body {
background: #fff;
color: #555;
line-height: 1.9;
margin: 0 auto;
}
.header {
background: white;
display: block;
margin: 0 auto;
position: fixed;
text-align: left;
width: 100%;
z-index: 99;
}
.parallax_container {
width: 100%;
}
.parallax {
padding-top: 50px;
}
.tagline {
color: white;
font-size: 75px;
position: absolute;
top: 50%;
bottom: 50%;
left: 5%;
right: 5%;
text-align: center;
cursor: pointer;
line-height: 1.2;
z-index: 97;
}
.content {
background: yellow;
height: 900px;
z-index: 98;
}
/* 5. Logo*/
.logo_container {
width: inherit;
padding: 10px;
}
#Logo {
-webkit-transition: width .5s ease;
-o-transition: width .5s ease;
transition: width .5s ease;
}
.largeLogo {
width: 350px;
}
.smallLogo {
width: 250px;
}
/* 6. Footer */
footer {
display: block;
height: 50px;
font-size: 13px;
margin: 0 auto;
padding: 25px 0 0 0;
position: relative;
text-align: center;
width: inherit;
}
<link rel="stylesheet" type="text/css" href="https://neilwhitedesign.co.uk/pt_testing_area/css.css" />
<body>
<div class="header">
<div class="logo_container"><img src="https://neilwhitedesign.co.uk/pt_testing_area/logo.png" class="largeLogo" id='Logo'>
</div>
</div>
<div class="parallax_container">
<div class="tagline" data-scroll-speed="3">This is the tagline</div>
<div class="parallax" data-scroll-speed="2"><img src="https://neilwhitedesign.co.uk/pt_testing_area/landscape.jpg" /></div>
</div>
<div class="content" data-scroll-speed="100">Content Area</div>
<footer>© 2021
<script src="https://neilwhitedesign.co.uk/pt_testing_area/js/copyright.js"></script> | All rights reserved.</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
Any guidance would be greatly appreciated.
Thanks
Neil White
You should never use on* handlers (unless you're creating a brand new element from in-memory) use .addEventListener() instead or the jQuery method .on() - that way handlers are attached to an element, not overwritten.
Place <script> tags (all of them) right before the closing </body> tag
Use classList.toggle or jQuery's .toggleClass()
You don't need two classes for big and small logo - only one.
jQuery plugins should use return to allow for methods chainability
Here's a remake of the plugin and your scripts:
// moveIt jQuery plugin
$.fn.moveIt = function() {
const $window = $(window);
const instances = [];
const updateItems = () => {
const scrTop = $window.scrollTop();
instances.forEach((inst) => inst.update(scrTop));
};
$window.on("scroll", updateItems); // Do on scroll
updateItems(); // and on page load
// Use "return" to allow $ methods chainability
return this.each(function(i, el) {
instances.push(new moveItItem(el));
});
}
function moveItItem(el) {
this.el = $(el);
this.speed = parseInt(this.el.data("scroll-speed"));
};
moveItItem.prototype.update = function(scrTop) {
this.el.css({transform: `translateY(${scrTop / this.speed}px)`});
};
// App
const $window = $(window);
const $logo = $("#Logo");
const docTop = 90;
function growShrinkLogo() {
$logo.toggleClass("small", $window.scrollTop() > docTop);
}
$window.on("scroll", growShrinkLogo); // Do on scroll
growShrinkLogo(); // and on page load
// moveIt plugin init:
$('[data-scroll-speed]').moveIt();
#charset "utf-8";
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1
}
a img {
border: none;
}
img {
max-width: 100%;
vertical-align: middle;
}
body {
background: #fff;
color: #555;
line-height: 1.9;
margin: 0 auto;
}
.header {
background: white;
display: block;
margin: 0 auto;
position: fixed;
text-align: left;
width: 100%;
z-index: 99;
}
.parallax_container {
width: 100%;
}
.parallax {
padding-top: 50px;
}
.tagline {
color: white;
font-size: 75px;
position: absolute;
top: 50%;
bottom: 50%;
left: 5%;
right: 5%;
text-align: center;
cursor: pointer;
line-height: 1.2;
z-index: 97;
}
.content {
background: yellow;
height: 900px;
z-index: 98;
}
.logo_container {
width: inherit;
padding: 10px;
}
#Logo {
-webkit-transition: width .5s ease;
-o-transition: width .5s ease;
transition: width .5s ease;
width: 350px;
}
#Logo.small {
width: 250px;
}
footer {
display: block;
height: 50px;
font-size: 13px;
margin: 0 auto;
padding: 25px 0 0 0;
position: relative;
text-align: center;
width: inherit;
}
<div class="header">
<div class="logo_container"><img src="https://neilwhitedesign.co.uk/pt_testing_area/logo.png" class="largeLogo" id='Logo'>
</div>
</div>
<div class="parallax_container">
<div class="tagline" data-scroll-speed="3">This is the tagline</div>
<div class="parallax" data-scroll-speed="2"><img src="https://neilwhitedesign.co.uk/pt_testing_area/landscape.jpg" /></div>
</div>
<div class="content" data-scroll-speed="100">Content Area</div>
<footer>© 2021 | All rights reserved.</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
It is because you declare window.onscroll twice and therefor it overwrites the first declaration. You just have to add the call of growShrinkLogo() to the second window.onscroll.
Working example:
var Logo = document.getElementById("Logo");
var endOfDocumentTop = 90;
var size = 0;
function growShrinkLogo() {
var scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 90;
if (size == 0 && scroll > endOfDocumentTop) {
Logo.className = 'smallLogo';
size = 1;
} else if (size == 1 && scroll <= endOfDocumentTop) {
Logo.className = 'largeLogo';
size = 0;
}
}
$.fn.moveIt = function() {
var $window = $(window);
var instances = [];
$(this).each(function() {
instances.push(new moveItItem($(this)));
});
window.onscroll = function() {
growShrinkLogo();
var scrollTop = $window.scrollTop();
instances.forEach(function(inst) {
inst.update(scrollTop);
});
}
}
var moveItItem = function(el) {
this.el = $(el);
this.speed = parseInt(this.el.attr('data-scroll-speed'));
};
moveItItem.prototype.update = function(scrollTop) {
var pos = scrollTop / this.speed;
this.el.css('transform', 'translateY(' + +pos + 'px)');
};
$(function() {
$('[data-scroll-speed]').moveIt();
});
#charset "utf-8";
/* CSS Document */
/* 2. Clearfix*/
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1
}
/* 3. Images*/
a img {
border: none;
}
img {
max-width: 100%;
vertical-align: middle;
}
/* 4. Structure*/
body {
background: #fff;
color: #555;
line-height: 1.9;
margin: 0 auto;
}
.header {
background: white;
display: block;
margin: 0 auto;
position: fixed;
text-align: left;
width: 100%;
z-index: 99;
}
.parallax_container {
width: 100%;
}
.parallax {
padding-top: 50px;
}
.tagline {
color: white;
font-size: 75px;
position: absolute;
top: 50%;
bottom: 50%;
left: 5%;
right: 5%;
text-align: center;
cursor: pointer;
line-height: 1.2;
z-index: 97;
}
.content {
background: yellow;
height: 900px;
z-index: 98;
}
/* 5. Logo*/
.logo_container {
width: inherit;
padding: 10px;
}
#Logo {
-webkit-transition: width .5s ease;
-o-transition: width .5s ease;
transition: width .5s ease;
}
.largeLogo {
width: 350px;
}
.smallLogo {
width: 250px;
}
/* 6. Footer */
footer {
display: block;
height: 50px;
font-size: 13px;
margin: 0 auto;
padding: 25px 0 0 0;
position: relative;
text-align: center;
width: inherit;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">
<div class="logo_container">
<img src="https://neilwhitedesign.co.uk/pt_testing_area/logo.png" class="largeLogo" id='Logo'>
</div>
</div>
<div class="parallax_container">
<div class="tagline" data-scroll-speed="3">
This is the tagline
</div>
<div class="parallax" data-scroll-speed="2">
<img src="https://neilwhitedesign.co.uk/pt_testing_area/landscape.jpg" />
</div>
</div>
<div class="content" data-scroll-speed="100">
Content Area
</div>
<footer>
© 2021 | All rights reserved.
</footer>
I am trying to horizontal scroll by mouse wheel only and div will snap to edge or center means on one scroll one slide go and next slide come in view. So I searched and found - https://codepen.io/vasiluca/pen/xWEQdQ?editors=0010 -I used and did some changes. First and Second slide scroll well but next slides not scroll by mouse wheel.
Jq
var scrolling = false;
var scrolled = 0;
const scrollDuration = 400;
const scrollPause = 0; // Sets how much you must scroll before changing the slide
// const scrollInterval = 5; // Time (seconds) before you can scroll again
function scroll(direction) {
if (scrolling == false) {
scrolling = true;
$('html, body').animate({
scrollLeft: direction == 'left' ? $('html,body').scrollLeft() - $('.slide').innerWidth() : $('html,body').scrollLeft() + $('.slide').innerWidth()
}, scrollDuration, function() {
scrolling = false;
});
}
}
$(document).scrollTop(0);
$(window).on('wheel', function(e) {
if (scrolling == false) {
scrolled++;
}
if (scrolled > scrollPause) {
if (e.originalEvent.deltaY < 0) { // scrolling down
scroll('left');
scrolled = 0;
}
if (e.originalEvent.deltaY > 0) { // scrolling up
scroll('right');
scrolled = 0;
}
}
});
$('.slide').mouseover(function() {
if (scrolling == false) {
$('html, body').animate({
scrollLeft: $(this).offset().left
}, 100);
}
});
$('.left').click(function() {
scroll('left');
scrolled = 0;
});
$('.right').click(function() {
scroll('right');
scrolled = 0;
});
$(document).scroll(function() {
if ($(document).scrollLeft() == 0) {
$('.left').css({
'opacity': 0,
'transform': 'translateX(-100%)'
})
} else {
$('.left').css({
'opacity': 1,
'transform': 'translateX(0)'
})
}
if ($(document).scrollLeft() == $('.slide-container').innerWidth() + $('.slide').innerWidth()) {
$('.right').css({
'opacity': 0,
'transform': 'translateX(100%)'
})
} else {
$('.right').css({
'opacity': 1,
'transform': 'translateX(0)'
})
}
});
$(document).keydown(function(e) {
switch(e.keyCode) {
case 39:
case 40:
scroll('right');
break;
case 37:
case 38:
scroll('left');
break;
}
});
CSS
body {
font-family: 'Roboto', sans-serif;
overflow-y: hidden;
border: 1px solid red;
}
*{margin: 0; padding: 0;}
.container {border: 1px solid yello;}
.horizontal{
overflow-x: auto;
overflow-y: hidden;
}
.header{
position: fixed;
width: 100vw;
text-align: center;
border: 1px solid yellow;
}
.left {
position: fixed;
top: 0;
left: 0;
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
background: rgba(255,255,255,1);
opacity: 0;
transition: background 0.15s ease;
opacity 0.5s ease;
transform 0.5s ease;
}
.left:hover{background: lightgrey;}
.right{
position: fixed;
top: 0;
right: 0;
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
background: rgba(255,255,255,.5);
transition: background 0.15s ease;
}
.right:hover{background: lightgrey}
.slide-container{
display: flex;
height: 100vh;
flex-wrap: nowrap;
align-items: center;
}
.slide{
flex: 0 0 100%;
height: 100%;
text-align: center;
font-size: 50px;
line-height: calc(100vh - 50px);
overflow: hidden;
}
.slide:nth-child(odd){
background: limegreen;
}
.slide:nth-child(even){
background: lightblue;
}
HTML
<div class="continer">
<div class="header">
<h1 class="title"> Horizontal Scrolling </h1>
<span>(Use Mousewheel)</span>
</div>
<span class="left">left</span>
<span class="right">right</span>
<div class="slide-container">
<div class="slide">A</div>
<div class="slide">B</div>
<div class="slide">C</div>
<div class="slide">D</div>
<div class="slide">E</div>
</div>
</div><!--continer ends here-->
This isn't an answer to the problem as the mousewheel is moving between slides OK at least on current browser (Edge on Windows10) but I put the code from the question up here as a snippet so others can easily try it in other environments.
var scrolling = false;
var scrolled = 0;
const scrollDuration = 400;
const scrollPause = 0; // Sets how much you must scroll before changing the slide
// const scrollInterval = 5; // Time (seconds) before you can scroll again
function scroll(direction) {
if (scrolling == false) {
scrolling = true;
$('html, body').animate({
scrollLeft: direction == 'left' ? $('html,body').scrollLeft() - $('.slide').innerWidth() : $('html,body').scrollLeft() + $('.slide').innerWidth()
}, scrollDuration, function() {
scrolling = false;
});
}
}
$(document).scrollTop(0);
$(window).on('wheel', function(e) {
if (scrolling == false) {
scrolled++;
}
if (scrolled > scrollPause) {
if (e.originalEvent.deltaY < 0) { // scrolling down
scroll('left');
scrolled = 0;
}
if (e.originalEvent.deltaY > 0) { // scrolling up
scroll('right');
scrolled = 0;
}
}
});
$('.slide').mouseover(function() {
if (scrolling == false) {
$('html, body').animate({
scrollLeft: $(this).offset().left
}, 100);
}
});
$('.left').click(function() {
scroll('left');
scrolled = 0;
});
$('.right').click(function() {
scroll('right');
scrolled = 0;
});
$(document).scroll(function() {
if ($(document).scrollLeft() == 0) {
$('.left').css({
'opacity': 0,
'transform': 'translateX(-100%)'
})
} else {
$('.left').css({
'opacity': 1,
'transform': 'translateX(0)'
})
}
if ($(document).scrollLeft() == $('.slide-container').innerWidth() + $('.slide').innerWidth()) {
$('.right').css({
'opacity': 0,
'transform': 'translateX(100%)'
})
} else {
$('.right').css({
'opacity': 1,
'transform': 'translateX(0)'
})
}
});
$(document).keydown(function(e) {
switch(e.keyCode) {
case 39:
case 40:
scroll('right');
break;
case 37:
case 38:
scroll('left');
break;
}
});
body {
font-family: 'Roboto', sans-serif;
overflow-y: hidden;
border: 1px solid red;
}
*{margin: 0; padding: 0;}
.container {border: 1px solid yello;}
.horizontal{
overflow-x: auto;
overflow-y: hidden;
}
.header{
position: fixed;
width: 100vw;
text-align: center;
border: 1px solid yellow;
}
.left {
position: fixed;
top: 0;
left: 0;
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
background: rgba(255,255,255,1);
opacity: 0;
transition: background 0.15s ease;
opacity 0.5s ease;
transform 0.5s ease;
}
.left:hover{background: lightgrey;}
.right{
position: fixed;
top: 0;
right: 0;
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
background: rgba(255,255,255,.5);
transition: background 0.15s ease;
}
.right:hover{background: lightgrey}
.slide-container{
display: flex;
height: 100vh;
flex-wrap: nowrap;
align-items: center;
}
.slide{
flex: 0 0 100%;
height: 100%;
text-align: center;
font-size: 50px;
line-height: calc(100vh - 50px);
overflow: hidden;
}
.slide:nth-child(odd){
background: limegreen;
}
.slide:nth-child(even){
background: lightblue;
}
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="continer">
<div class="header">
<h1 class="title"> Horizontal Scrolling </h1>
<span>(Use Mousewheel)</span>
</div>
<span class="left">left</span>
<span class="right">right</span>
<div class="slide-container">
<div class="slide">A</div>
<div class="slide">B</div>
<div class="slide">C</div>
<div class="slide">D</div>
<div class="slide">E</div>
</div>
</div><!--continer ends here-->
I have the following code that contains positioned hidden div (.converter) and I use JS to make it slide up and down based on the user's scroll. But I would like to make it smoothly and I thought transition would do the job.
window.addEventListener('scroll', function() {
var scroll = window.pageYOffset || document.documentElement.scrollTop;
var element = document.querySelector(".converter");
if (scroll >= 400) {
element.classList.add("atcbottomactive");
} else {
element.classList.remove("atcbottomactive");
}
});
.converter {
position: fixed;
height: 60px;
width: 100%;
bottom: -200;
background: red;
transition: 1s;
z-index: 10000;
}
.ccontent {
display: inline-flex;
width: 100%;
padding: 10px 5%;
}
.atcbottomactive{
bottom:0;
transition: 1s;
}
.page {
background: green;
height: 1500px;
width: 100%;
}
<div class="page">Scroll me: 400px</div>
<div class="converter">
<div class="ccontent"></div>
</div>
Thanks in advance
So close! All you were missing was the 'px' on your .converter class bottom attribute. Because -200 isn't a valid bottom, you were going from an unset bottom to 0px, which cant be animated/ transitioned.
window.addEventListener('scroll', function() {
var scroll = window.pageYOffset || document.documentElement.scrollTop;
var element = document.querySelector(".converter");
if (scroll >= 400) {
element.classList.add("atcbottomactive");
} else {
element.classList.remove("atcbottomactive");
}
});
.converter {
position: fixed;
height: 60px;
width: 100%;
bottom: -200px;
background: red;
transition: 1s;
z-index: 10000;
}
.ccontent {
display: inline-flex;
width: 100%;
padding: 10px 5%;
}
.atcbottomactive{
bottom:0;
transition: 1s;
}
.page {
background: green;
height: 1500px;
width: 100%;
}
<div class="page">Scroll me: 400px</div>
<div class="converter">
<div class="ccontent"></div>
</div>
When scrolling down the page the sticky menu is enabled and gets little jerky. What's the issue and how to get smooth animation.
var elementPosition = $('.head_section').offset();
$(window).scroll(function() {
if ($(window).scrollTop() > elementPosition.top + 150) {
$('.head_section').fadeOut(100);
$('.sticky-menu').fadeIn(100);
} else {
$('.head_section').fadeIn(100);
$('.sticky-menu').fadeOut(100);
}
});
.home {
height: 2000px;
}
.head_section {
height: 100px;
width: 100%;
background: black;
}
.sticky-menu {
display: none;
position: fixed;
top: 0;
background: red;
height: 100px;
right: 0;
left: 0;
z-index: 9999;
transition: all 0.1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="home">
<div class="head_section"></div>
<div class="sticky-menu"></div>
</div>
Is there any solution for this?
In your example, you used jQuery for the animation. So you need to remove the transition from your CSS. You can only use one, jQuery OR CSS, but not both in this case.
var elementPosition = $('.head_section').offset();
$(window).scroll(function() {
if ($(window).scrollTop() > elementPosition.top + 150) {
$('.head_section').fadeOut(1000);
$('.sticky-menu').fadeIn(1000);
} else {
$('.head_section').fadeIn(1000);
$('.sticky-menu').fadeOut(1000);
}
});
.home {
height: 2000px;
}
.head_section {
height: 100px;
width: 100%;
background: black;
}
.sticky-menu {
display: none;
position: fixed;
top: 0;
background: red;
height: 100px;
right: 0;
left: 0;
z-index: 9999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="home">
<div class="head_section"></div>
<div class="sticky-menu"></div>
</div>