I have some items on a page. When they scroll into view, I add animation classes to them, like this:
$(window).scroll(function() {
var topOfWindow = $(window).scrollTop(),
bottomOfWindow = topOfWindow + $(window).height();
$('.buckle').each(function(){
var imagePos = $(this).offset().top;
if (imagePos < topOfWindow+400) {
$(this).addClass('animate');
}
});
});
Here's a stripped-down JSFiddle demo
This triggers the animation to occur one time per page load: when the image is 400px from the top of the viewport, the class gets added, the animation rolls, then the image remains static.
But now they are meant to animate once each time they scroll into the viewport, whether the user is scrolling upwards or downwards. In the case of the demo, the "Buckle" element would lose the class .animate after scrolling out of view, and have it re-applied when scrolling back in to view.
What would be the most efficient approach for triggering this with JQuery?
I'm not sure if I entirely understood you, but I think its not a very good idea to trigger the animation 400px from the top. What if the window/viewport's height is even less than 400px, the animation would be initiated before it was scrolled into view. I think it should be determined via the windows bottom.
$(window).scroll(function () {
var topOfWindow = $(window).scrollTop(),
bottomOfWindow = topOfWindow + $(window).height();
$('.buckle').each(function () {
var imagePos = $(this).offset().top;
if(imagePos <= bottomOfWindow && imagePos >= topOfWindow){
$(this).addClass('animate');
}else{
$(this).removeClass('animate');
}
});
});
Here's the demo: http://jsfiddle.net/2LPmr/1/
Cheers!
Related
I need my sidebar to scroll up and down with the window but stop when the div is at its top or bottom. The code below works when the page is first loaded and scrolled down or when the page is scrolled up slowly, but when the page is scrolled to the very bottom of the sidebar div, the page has to reach the top (and then some) in order to trigger that margin change.
Is there some other trigger I should be looking for besides just on scroll? How can I adjust this code to properly adjust the div?
$(window).on("load scroll", function() {
var scrollYpos = $(document).scrollTop();
var sidebarinfo = $("#sidebar").offset().top + $("#sidebar").height();
var windowinfo = $(window).height() + $(window).scrollTop();
if ((windowinfo)<(sidebarinfo)){
$('#sidebar').css('margin-top', -scrollYpos);
}
});
The sidebar div is fixed position. If I use absolute position, the div scrolls fine, but it doesn't stop when the bottom of the div has been reached - it just continues to scroll with the window.
I've fixed the main part of the problem with this code.
$(window).on("load scroll", function() {
var sidebarinfo = $("#sidebar").scrollTop() + $("#sidebar").height();
var windowinfo = $(window).innerHeight() + $(window).scrollTop();
if ((windowinfo)<(sidebarinfo)){
$('#sidebar').css('top', -($(window).scrollTop()));
}
});
The only problem is on page load, the sidebar gets stuck in the wrong position until it is scrolled all the way up (and more).
I actually figured out that I needed to adjust a few things and add an else clause:
$(window).on("scroll", function() {
var scrollmargin = $(window).scrollTop() - $("#sidebar").outerHeight();
var sidebarinfo = $("#sidebar").scrollTop() + $("#sidebar").outerHeight();
var windowinfo = $(window).innerHeight() + $(window).scrollTop();
console.log($(window).scrollTop());
if ((windowinfo)<(sidebarinfo)){
$('#sidebar').css('top', (sidebarinfo + scrollmargin)*-1);
}
else {
var margintop = $(window).innerHeight() - $("#sidebar").outerHeight();
$('#sidebar').css('top', margintop);
}
});
I'm creating this landing page: http://tag4share.com/landing/#
Where is located the two galaxy s3 (one white with "Organizador" label on it and a black with "Participante" label), I want to stop scrolling the page and automatically start scrolling the content inside the mobile (an iFrame, div, anything).
Is it possible?
Basically I want to "focus" the scrolling inside a div (and make it work even if the cursor isn't hovering it). Or animate while scrolling without scrolling the body.
Example: http://www.google.com/nexus/5/
On the "Everything you need to capture the moments that matter." part.
My attempt:
var lastScroll;
var currentScroll = $(window).scrollTop();
$(window).scroll(function() {
lastScroll = currentScroll;
currentScroll = $(window).scrollTop();
if($(window).scrollTop() >= 2024 && $(window).scrollTop() < 2500)
{
var difference = currentScroll - lastScroll;
$(".main").css({"margin-top":"-="+currentScroll});
}
});
I've tried to move the main div along with scrolling. It works but it looks really strange (keeps shaking).
Thanks!
I've just tidied up your code a tad, fixed indentation etc.
As for actually scrolling your div when you hit the position, use animate to actually mimic the scrolling effect, once you know you have reached the bottom, you can put another if statement within the scroll function to stop resetting the scroll position.
var lastScroll;
var scrollPosition = $(window).scrollTop();
var reachedBottom = false;
var phonePositionTop = $('#phoneContainerID').position().top;
var phonePositionBottom = phonePositionTop + $('#phoneContainerID').height();
$(window).scroll(function() {
if(scrollPosition >= phonePositionTop && scrollPosition < phonePositionBottom && reachedBottom == false){
var difference = currentScroll - lastScroll;
// Keep resetting scroll to the phoneContainerTop position
$(".main").css({"margin-top": phonePositionTop});
var scrollLimit = -100;
if ($('#phoneContainerID').position().top < scrollLimit) {
//Once the scroll limit is less than -100 (scrolled up 100 pixels)
// Disable our 'pause' effect, and continue
reachedBottom = true;
}
}
});
I haven't tested this, however I was just giving you an idea of where to go from here.
I hope I have helped a little!
I make the scroller with top to bottom and bottom to top simultaneously. I did most of them. From bottom to top is working perfect and for top to bottom only causing somehow problem is works only if i increase the height of the div container. I am not sure where i could change the values to make it workable.
Here is the fiddle
JS
var percentageToScroll = 89;
var height = $(document).innerHeight();
var scrollAmount = height * percentageToScroll / 100;
alert(scrollAmount);
var overheight = jQuery(document).height() - jQuery(window).height();
//alert(overheight);
jQuery("html, body").animate({
scrollTop: scrollAmount
}, 900);
I did with percentage to animate the scroll.
You can click the bottom button in fiddle to see that. I want to scroll only 89% but it scroll fully to the bottom.
Much Appreciated your Help !!!
The top of the viewport will be at 89% of the document.
If for example your document is 100px in height, the top 89px will be off-screen and the bottom 11px are displayed (for as far as possible). If however you're screen-size is larger than this 11px, it can't scroll down that much.
What you probably want is:
var scrollAmount = ($(document).innerHeight() - $(window).height()) * percentageToScroll / 100;
Please try this it may helps you
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()){
alert("at bottom!");
}
});
You can also adjust it according to your requirment by reducing its height
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height()-100){
alert("near bottom!");
}
});
I am trying to get an fly-in / fly- out effect happening
Scroll down - animate in
Scroll-up animate out
To get a similar effect to the nizo website
http://nizoapp.com/
I have used this code I found on Stackoverflow "Fade in element on scroll down using css"
to determine whether the element is on screen, in the viewport, and then animate it.
$(window).scroll(function () {
/* Check the location of each desired element */
$('.article').each(function (i) {
var bottom_of_object = $(this).position().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it it */
if (bottom_of_window > bottom_of_object) {
$(this).animate({
'opacity': '1'
}, 500);
}
});
});
Which works quite well.
I have added it to this demo page, and modified it.
http://saigonhousefinder.com/potteryone/fadinonscroll.html
(probably not live for long)
I have used css transitions to get the effect I am looking for. FLy-in Fly-out etc etc
And then I found..... this function which does the same thing
function isScrolledIntoView(elem)
{
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
return ((elemTop <= docViewBottom) && (elemTop >= docViewTop));
}
Anyway.......
I cant get the animations to work when scrolling down, fly-in.
But I cannot get the animations to go in reverse when they fly out on scroll up
I thought the easiest way would be to detect if you are scrolling down of up, so I found this method / function
(function () {
var previousScroll = 0;
$(window).scroll(function () {
var currentScroll = $(this).scrollTop();
if (currentScroll > previousScroll){
$("#div").fadeIn("slow");
}
else {
$("#div").fadeOut("slow");
}
previousScroll = currentScroll;
});
}());
Which works well, but I cannot get it working.
At this point I can detect when an element is visible on the screen then add an effect to it.
What I need it to detect when that same element is beginning to go off the screen and apply another effect to it.
Any help on how to get this working would be great
Have a nice day
That's a really neat demo and a great concept! I played around with some code and it seems that you are almost there. You need to detect when the top of the screen meets the top of the element, so only calculate the offset once when the page is loaded. I added a 20px threshold so it kicks in a bit early. Let me know if this helps, it can be tweaked depending on how and when you want to call it. Here is a simple js fiddle demo
http://jsfiddle.net/XhAhR/23/
(function () {
var previousScroll = 0;
var elemTop = $("#div").offset().top;
$("#div").fadeOut();
$(window).scroll(function () {
var currentScroll = $(this).scrollTop();
if (currentScroll > previousScroll){
if(elemTop -20 > currentScroll){
$("#div").fadeIn("slow");
}
}
else {
if(elemTop - 20 > currentScroll){
$("#div").fadeOut("slow");
}
}
previousScroll = currentScroll;
});
}());
I want to detect whenever the user changes the height of the scrollbar. Right now the script I have detects it once (when the user moves the scrollbar down) but when you move the scrollbar again nothing happens. My logic is that when the user moves the scrollbar to a position greater than 296 a div appears using animate(), and this works. But when the user moves the scrollbar to a position less than 296 the div should disappear using animate(). My code is below. Can anyone help? Thanks a lot.
$(window).scroll(function(){
var wintop = $(window).scrollTop();
var docheight = $(document).height();
var winheight = $(window).height();
var newWidthGrow = 500;
var smallHeight = 0;
var smallWidth = 0;
if(wintop > 296)
{
$("#slidebottom").animate({height:docheight +"px", width:newWidthGrow + "px"},'fast');
}
if(wintop < 296)
{
$("#slidebottom").animate({height:smallheight +"px", width:smallWidth + "px"}, 'fast');
}
});
Two issues here:
You initiate a variable named smallHeight but you use smallheight, which causes an error.
You should add the .stop()-method before running another animation like that:
$("#slidebottom").stop().animate();
And you should consider to run each animation only once and not any time the scroll event is fired. A boolean can be helpful here:
if(wintop < 296 && expanded) {
expanded = false;
$("#slidebottom").stop().animate();
}
Demo
Try before buy