I am using the excellent jQuery Reel plugin (http://jquery.vostrel.cz/reel) for a project. I would like to bind to the window scroll event, so when the user scrolls down the page the plugin advances 1 frame for say every 10px scrolled, if the user scrolls up the animation is reversed.
The plugin has methods I can pass the values to no problem and I know how to bind to the window scroll event. What I am struggling with is the last.
How can I use jQuery/JavaScript to say for every 10 pixels scrolled in any vertical direction advance 1 frame in the animation? I know I can store the window scroll in a variable but I'm unsure how to say every time it hits a multiple of 10 advance one frame.
Many thanks in advance.
EDIT
Thanks to help of the users below I worked out a solution. As follows:
$(window).scroll(function()
{
windowScrollCount = $(this).scrollTop();
animationFrame = Math.round(windowScrollCount / 100);
});
So here I am getting the scrolled distance in windowScrollCount, translating it into frames in animationFrame and setting it back with .reel("frame", animationFrame); I am actually doing this for every 100 frames as every 10 was to quick.
Thanks to help of codef0rmer and noShowP I worked out a solution. As follows:
$(window).scroll(function()
{
windowScrollCount = $(this).scrollTop();
animationFrame = Math.round(windowScrollCount / 100);
});
So here I am getting the scrolled distance in windowScrollCount, translating it into frames in animationFrame and setting it back with .reel("frame", animationFrame); I am actually doing this for every 100 frames as every 10 was to quick.
If I'm wrong then you might want this:
var jump = 500; // consider this is your 10px
window.scrollHeight = 0;
$(window).scroll(function () {
console.log($(this).scrollTop());
var diff = $(this).scrollTop() - window.scrollHeight;
if (diff >= jump) {
window.scrollHeight = $(this).scrollTop();
console.log('reload frame');
}
});
Demo : http://jsfiddle.net/Dyd6h/
You could possible have a sticky element to the top of your page,
position: fixed; top 0; left: 0;
(hidden if you like).
And then when you are scrolling you can monitor its offset:
$('element').offset().top
You can then see how far down the page you have scrolled, so every time they scroll see what its top value is and trigger events appropiately?
EDIT:
I've set up a little JSfiddle with a start of what I think you need.
http://jsfiddle.net/qJhRz/3/
Im just calculating the frame you need to be on and storing that in a variable. Is it anything like what you're looking for?
Related
Disclaimer: I am not a JavaScript developer, I'm a web designer. HTML and CSS, I handle all day, JS, not so much. That's why I'm reaching out for help.
The following script allows for a smooth scroll to the top of the page:
function scrollToTop() {
var position =
document.body.scrollTop || document.documentElement.scrollTop;
if (position) {
window.scrollBy(0, -Math.max(1, Math.floor(position / 10)));
scrollAnimation = setTimeout("scrollToTop()", 30);
} else clearTimeout(scrollAnimation);
}
Is there a way to "stop" the script from executing if the user decides to scroll back down the moment the script is running and taking the user back to the top of the page?
Here's a demo for reference: https://codepen.io/ricardozea/pen/ewBzyO
Thank you.
To specifically detect scrolling back down the page, you could check the old postion against the current position and ensure the scroll is moving in the intended direction:
function scrollToTop(prevPosition) {
// first time round, prevPosition is undefined
var position =
document.body.scrollTop || document.documentElement.scrollTop;
// did page move in non-expected direction? If so, bail-out
if (prevPosition <= position) {
return;
}
var scrollAnimation; //declare this so it doesn't leak onto global scope
if (position) {
var scrollAmt = -Math.max(1, Math.floor(position / 10));
window.scrollBy(0, scrollAmt);
// After timeout, re-call the function with current position.
// Becomes prevPosition for the next time round
scrollAnimation = setTimeout(() => scrollToTop(position), 30);
} else clearTimeout(scrollAnimation);
}
See https://codepen.io/spender/pen/eYvRyox
Why not listen to wheel events? This won't detect dragging the scrollbar with the mouse.
Thanks a lot for your answers!
After consulting with a friend of mine, he provided me with a much succinct way to accomplish the overall behavior of smooth scrolling to the top while solving the potential case of a user wanting to scroll back down during the animation.
Just add this script to a <button> element in the onclick: attribute:
window.scrollTo({top: 0, behavior: "smooth"});
It looks like this:
<button onclick='window.scrollTo({top: 0, behavior: "smooth"});'>Back to Top ↑</button>
Here's a new demo: https://codepen.io/ricardozea/pen/NWpgyjL
Normally web page automatically scroll down or scroll up when mouse with link or drag element reach bottom/top of the view port.I need to change the position of start scrolling of the webpage, the web page or particular <div> scroll down/up when a drag-element reach some distance of the view port.How can achieve this. I am using angular-drag-and-drop-lists Plug.
Default Scrolling Start Position:
Customize Scroll start Position (I need this result):
Probably you need some js code based on drag event.
Quick html example:
Example link
<script>
//Put distance you want to scroll from
var youMaxDist = 50;
var scrollSpeed = 10;
function calcCoords(event) {
//Distance to buttom. It isn't works fine, but good enough
var currDist = window.innerHeight - event.clientY;
//Trigger scroll
if(currDist < youMaxDist)
window.scrollTo(0, document.documentElement.scrollTop + scrollSpeed);
}
</script>
Also, please, pay some attention for browser version supports and mobile screen issues
I'm having an annoying issue trying to position the responsive navigation hamburger. I am using a plugin called responsive menu which creates the hamburger and uses absolute positioning.
I am trying to position the hamburger in the centre of the header at all times.
To achieve this I am using the following jQuery code.
However, the issue I have is when the hamburger is displayed and you scroll down the page and scroll back to the top of the page quickly. The hamburger does not position itself in the centre of the header. You need to scroll back down slightly for it to jump into place.
Any ideas how I can fix this please.. It's driving me crazy and I don't know jquery very well :(
Thank you for any advice in advance :)
Link to the site in question
$( window ).on("load resize scroll", function(e){
var headerHeight = $('nav').height()/2;
var iconHeight = $('#click-menu').height()/2;
var total = headerHeight - iconHeight;
if ($(window).scrollTop() >= 1) {
$('#click-menu').css('top', total);
}
else {
$('#click-menu').css('top', total);
}
});
It's hard for me to test and confirm this, but I believe the reason it's position is off when it hits the top is because the evaluation of $('nav').height()/2; happens immediately, but the header animates to size over 300 ms.
Although a bit hacky, I think you can solve the problem by adding a setTimeout
function setNavTop(){
var headerHeight = $('nav').height()/2;
var iconHeight = $('#click-menu').height()/2;
var total = headerHeight - iconHeight;
$('#click-menu').css('top', total);
}
$( window ).on("load resize scroll", function(e){
if ($(window).scrollTop() >= 1) {
setNavTop();
}
else {
setTimeout(setNavTop, 300); // wait for header to animate to size.
}
});
Since it has to delay for 300ms before adjusting the icon, its looks a bit glitchy. You can improve this by adding tweening the setTimeout. Not the most elegant, but it works
setNavTop();
setTimeout(setNavTop, 100);
setTimeout(setNavTop, 200);
setTimeout(setNavTop, 300);
Is it possible via Javascript to store how far a user has scrolled while on page (pixel-wise), regardless of where they are at any time?
For example, I'd like to track how far someone scrolled before going back up to do a specific action at the top of the page.
Thanks!
Simply save the scroll position if it's the lowest one, every time a scroll happens.
var maxScroll = 0;
$(window).scroll(function () {
var scroll = $(document).scrollTop();
if (scroll > maxScroll) maxScroll = scroll;
});
// maxScroll is at any time the lowest point of vertical scrolling on the page.
You might want to debounce the handler for better performance.
okay heres the scenario. I have a one page website with may sections using anchor links. Whe the user is on a secondary layout (page) and when they click on to go to a section on the main page again, for some reason the graphics dont load properly until a scroll happens. All I want to do is whenever the main layout is loaded, no matter which anchor it loads to, simply scroll the page up or down by 1 pixel.
$.scrollTo({ top: '+=100px', left: '+=0px' }, 800);
I tried the above, but this code simply takes the user 100 pixels from the top. I don't want that to happen, i.e. not from the top but from where ever the user is on screen.
use jquery scrollTop() to set the scroll position to the current scroll position + 1:
$(window).scrollTop($(window).scrollTop()+1);
I have a similar problem. I want to scroll down 1 pixel and then 1 pixel up, so the user hopefully won't notice anything at all. I did this:
window.scrollBy(0, 1); // 0 pixels horizontal and 1 pixel down
window.scrollBy(0, -1); // 0 pixels horizontal and 1 pixel up
UPDATE:
But I might end up using JQuery instead. All I want is the scroll event to fire and I can do that with:
$(window).scroll();
A pure JavaScript solution without the jQuery overhead:
window.scrollY += 100;
With jQuery (and a fancy animation):
var cur = $(window).scrollTop();
$(window).animate({scrollTop: cur + 100});
$("html, body").animate({scrollTop: ($(window).scrollTop() + 1)});