The main problem is when I scroll down with the mouse my vanilla JS code doesn't execute because forEach is not a function. I don't know why this happens, I hope you can help me with this issue, thanks!
const boxes = document.querySelector(".box");
// event listener on scroll
window.addEventListener("scroll", animateDiv);
// visible content on load
animateDiv();
function animateDiv() {
const animateTrigger = (window.innerHeight / 5) * 4;
boxes.forEach((box) => {
// height of div from in comparison to scroll
const divTop = box.getBoundingClientRect().top;
if (divTop < animateTrigger) {
box.classList.add("show");
} else {
box.classList.remove("show");
}
});
}
I think you need to use this
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
And not querySelector
Related
I tried to use js code to highlight text items on scroll. I tried using js. So the class for changing the element is added immediately after the page is loaded, and not when scrolling to it. Although I checked this js code in a separately created site and everything worked fine
Before that I tried plugins AOS and WOW. But they didn't work because of the ScrollTrigger plugin and something else on the page. How can I make it so that on my site the class is added to the block only when I have scrolled to it and removed when I have scrolled it? How to make friends with the ScrollTrigger plugin with AOC or WOW?
document.addEventListener('DOMContentLoaded', () => {
const scrollItems = document.querySelectorAll('.services-items');
const scrollAnimation = () => {
let windowCenter = (window.innerHeight / 2) + window.scrollY;
console.log(windowCenter)
scrollItems.forEach(el => {
let scrollOffset = el.offsetTop + (el.offsetHeight / 2);
if (windowCenter >= scrollOffset) {
el.classList.add('animation-class');
} else {
el.classList.remove('animation-class');
}
});
};
scrollAnimation();
window.addEventListener('scroll', () => {
scrollAnimation();
});
});
I have multiple divs on my page with different classes
how can I check which div is scrolled to the top and therefore do something.
<div class="menu-session-0">
content
</div>
<div class="menu-session-1">
content
</div>
<div class="menu-session-2">
content
</div>
I already tried this :
$(window).scroll(function() {
setTimeout(function(){
var hT = $('.session-index_1').offset().top,
hH = $('.session-index_1').outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop() + 175;
if(hT <= (wS + 250)){
$('.menu-item').removeClass('menu-item_active');
$('.item-index-1').addClass('menu-item_active');
mySwiper.slideTo(1);
mySwiper.update();
}
},1050);
});
But it did not work as I expected...
Ok.. I get it now, I think.. :P
This should (in theory) work just fine if you copy and paste instead of your code.
If you really want to use JQuery just replace the element reference getters and class writers
const menuItems = document.getElementsByClassName('menu-item');
const menuSessions = document.getElementsByClassName('menu-session');
var nextSession, activeSession;
// do this to get menu-session offsets.. rerun function on viewport resize
function getSessionOffset() {
for( let session of menuSessions ) {
// store position and dataset.index directy on the element reference
session.y = session.offsetTop;
session.indx = session.dataset.index;
}
// define active elements which position we listen for
// these are correct if the window scroll offset is 0 (or at the top)
activeSession = menuSessions[0];
nextSession = menuSessions[1];
onScroll(window.pageYOffset); // so we check and set the correct active elements
}
getSessionOffset();
// page scroll listener
window.addEventListener( 'scroll' , ScrollHandler );
var lastScrollPos = 0; // last recorded window scroll offset
var scrollTick = false; // the tick is used to throttle code execution
function ScrollHandler (ev) {
lastScrollPos = ev.target.scrollTop;
if (!scrollTick) {
window.requestAnimationFrame(() => { // <- read up on this if you are not familiar. Very usefull
onScroll(lastScrollPos);
scrollTick = false;
});
scrollTick = true;
}
}
function onScroll(scrollY) {
if (scrollY > nextSession.y) { // if lower offset is less than scrollPos
removeActiveClass(activeSession.indx); // we remove the active class from menu item
activeSession = menuSessions[nextSession.indx]; // define new elements to listen for
nextSession = menuSessions[nextSession.indx + 1];
addActiveClass(activeSession.indx); // and add an active class to the new menu item
} else if (scrollY < activeSession.y) { // do the same here only in reverse
removeActiveClass(activeSession.indx);
nextSession = menuSessions[activeSession.indx];
activeSession = menuSessions[nextSession.indx - 1];
addActiveClass(activeSession.indx);
}
}
function removeActiveClass(indx) {
menuItems[indx].classList.remove('menu-item_active');
}
function addActiveClass(indx) {
menuItems[indx].classList.add('menu-item_active');
}
We listen only for the current and next values.
This may look like a lot but can be shortened to a third of the size.
Hope this helps :)
In a nutshell I'm creating a sticky button that shows after the scroll position pass a target element on the page. I'm trying to calculate the distance from the top of the page to the bottom of the target element. The script below seems to work find on load but if I resize the browser the numbers are not recalculated to get the correct distance. I know I should be using another event listener like "on resize" but I can't seem to get the logic right with my current code. Any help is welcome thanks!
Current Code
$(function(){
function ctaBundle(){
//target element
var cardsContainer = document.querySelector('.card-block');
// calculate the distance from top to the bottom of target element plus padding offset
var elDistanceToTop = window.pageYOffset + cardsContainer.getBoundingClientRect().bottom - 48;
//using to only trigger on mobile using mql
var mq = window.matchMedia('(max-width: 30em)');
//function with if statement to fade in if you pass target element
$(window).on('scroll', function() {
if ($(this).scrollTop() > elDistanceToTop && mq.matches) {
$(".sticky-cta-double").fadeIn();
}else{
$(".sticky-cta-double").hide();
}
});
}
ctaBundle();
});
I think I figured it out. By removing the on scroll event in the function and adding both event listeners after the function it seems to work.
$(function(){
function ctaBundle(){
var cardsContainer = document.querySelector('.card-block');
var bundleHeader = document.querySelector('.bundle-header');
var elDistanceToTop = window.pageYOffset + cardsContainer.getBoundingClientRect().bottom - 48;
var mq = window.matchMedia('(max-width: 30em)');
if ($(this).scrollTop() > elDistanceToTop && mq.matches) {
$(".sticky-cta-double").fadeIn();
}else{
$(".sticky-cta-double").hide();
}
}
ctaBundle();
window.addEventListener('resize', ctaBundle, false);
window.addEventListener('scroll', ctaBundle, false);
});
If anyone has a better answer/logic please let me know but this seems to be working as intended now.
I have an app created using VueJS. It is a multistep form with a next button.
You can view the app working here:
https://staging.evbox.com/configurator.html
The issue I am trying to solve, is once the user clicks the next button, the top of the following question is visible. Can someone help me with a vanilla JS solution or some advice?
The button html:
<button class="button-container__next" type="button" #click="goToNextStep()">Next</button>
And the function is:
goToNextStep: function () {
this.currentStep++
}
It seems that the scrollbar is for body. So you can do this:
goToNextStep: function () {
this.currentStep++;
window.scrollTo(0, 0);
}
If the main scrollbar is not attached to the body, try two following lines:
document.body.scrollTop = 0; // For safari
document.documentElement.scrollTop = 0;
I solved it by doing the following. I found this script but I have to be honest im not really sure how it works. Can someone explain it to me?
goToNextStep: function () {
this.currentStep++
let myDiv = document.getElementById('wrapper');
scrollTo(document.body, myDiv.offsetTop, 100);
function scrollTo(element, to, duration) {
if (duration < 0) return;
var difference = to - element.scrollTop;
var perTick = difference / duration * 2;
setTimeout(function() {
element.scrollTop = element.scrollTop + perTick;
scrollTo(element, to, duration - 2);
}, 10);
}
}
I also added this to the CSS:
html { height: 100%; overflow:auto!important; }
body { height: 100%!important; }
Just wondering if anyone has an idea as to how I might re-create a nav bar style that I saw a while ago, I just found the site I saw it on, but am not sure how they might have gotten there. Basically want it to scroll with the page then lock to the top...
http://lesscss.org/
Just do a quick "view source" on http://lesscss.org/ and you'll see this:
window.onscroll = function () {
if (!docked && (menu.offsetTop - scrollTop() < 0)) {
menu.style.top = 0;
menu.style.position = 'fixed';
menu.className = 'docked';
docked = true;
} else if (docked && scrollTop() <= init) {
menu.style.position = 'absolute';
menu.style.top = init + 'px';
menu.className = menu.className.replace('docked', '');
docked = false;
}
};
They're binding to the onscroll event for the window, this event is triggered when the window scrolls. The docked flag is set to true when the menu is "locked" to the top of the page, the menu is set to position:fixed at the same time that that flag is set to true. The rest is just some simple "are we about to scroll the menu off the page" and "are we about back where we started" position checking logic.
You have to be careful with onscroll events though, they can fire a lot in rapid succession so your handler needs to be pretty quick and should precompute as much as possible.
In jQuery, it would look pretty much the same:
$(window).scroll(function() {
// Pretty much the same as what's on lesscss.org
});
You see this sort of thing quite often with the "floating almost fixed position vertical toolbar" things such as those on cracked.com.
mu is too short answer is working, I'm just posting this to give you the jquery script!
var docked = false;
var menu = $('#menu');
var init = menu.offset().top;
$(window).scroll(function()
{
if (!docked && (menu.offset().top - $("body").scrollTop() < 0))
{
menu.css({
position : "fixed",
top: 0,
});
docked = true;
}
else if(docked && $("body").scrollTop() <= init)
{
menu.css({
position : "absolute",
top: init + 'px',
});
docked = false;
}
});
Mu's answer got me far. I tried my luck with replicationg lesscss.org's approach but ran into issues on browser resizing and zooming. Took me a while to find out how to react to that properly and how to reset the initial position (init) without jQuery or any other library.
Find a preview on JSFiddle: http://jsfiddle.net/ctietze/zeasg/
So here's the plain JavaScript code in detail, just in case JSFiddle refuses to work.
Reusable scroll-then-snap menu class
Here's a reusable version. I put the scrolling checks into a class because the helper methods involved cluttered my main namespace:
var windowScrollTop = function () {
return window.pageYOffset;
};
var Menu = (function (scrollOffset) {
var Menu = function () {
this.element = document.getElementById('nav');
this.docked = false;
this.initialOffsetTop = 0;
this.resetInitialOffsetTop();
}
Menu.prototype = {
offsetTop: function () {
return this.element.offsetTop;
},
resetInitialOffsetTop: function () {
this.initialOffsetTop = this.offsetTop();
},
dock: function () {
this.element.className = 'docked';
this.docked = true;
},
undock: function () {
this.element.className = this.element.className.replace('docked', '');
this.docked = false;
},
toggleDock: function () {
if (this.docked === false && (this.offsetTop() - scrollOffset() < 0)) {
this.dock();
} else if (this.docked === true && (scrollOffset() <= this.initialOffsetTop)) {
this.undock();
}
}
};
return Menu;
})(windowScrollTop);
var menu = new Menu();
window.onscroll = function () {
menu.toggleDock();
};
Handle zoom/page resize events
var updateMenuTop = function () {
// Shortly dock to reset the initial Y-offset
menu.undock();
menu.resetInitialOffsetTop();
// If appropriate, undock again based on the new value
menu.toggleDock();
};
var zoomListeners = [updateMenuTop];
(function(){
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0];
var lastWidth = 0;
function pollZoomFireEvent() {
var widthNow = w.innerWidth || e.clientWidth || g.clientWidth;
if (lastWidth == widthNow) {
return;
}
lastWidth = widthNow;
// Length changed, user must have zoomed, invoke listeners.
for (i = zoomListeners.length - 1; i >= 0; --i) {
zoomListeners[i]();
}
}
setInterval(pollZoomFireEvent, 100);
})();
Sounds like an application of Jquery ScrollTop and some manipulation of CSS properties of the navbar element. So for example, under certain scroll conditions the navbar element is changed from absolute positioning with calculated co-ordinates to fixed positioning.
http://api.jquery.com/scrollTop/
The effect you describe would usually start with some type of animation, like in TheDeveloper's answer. Default animations typically slide an element around by changing its position over time or fade an element in/out by changing its opacity, etc.
Getting the "bouce back" or "snap to" effect usually involves easing. All major frameworks have some form of easing available. It's all about personal preference; you can't really go wrong with any of them.
jQuery has easing plugins that you could use with the .animate() function, or you can use jQueryUI.
MooTools has easing built in to the FX class of the core library.
Yahoo's YUI also has easing built in.
If you can remember what site it was, you could always visit it again and take a look at their source to see what framework and effect was used.