I have two containers set up on a page, the first and second. The second is after the first container.
I'm trying to write a jQuery function that upon reaching the end of the first container, on scroll, it changes the top position of the second container (negative top position) so it feels as if the second container is being scrolled up and over the first container.
I have the following so far, which is doing a few things to get me started. Firstly, on scroll, I know when I reach the bottom of the first container and when the trigger should happen to begin scrolling the second container up. But then, I am not very sure how to get the top position to negatively increment as I scroll.
Any help?
function caseStudyScroll() {
var secondContainerHeight = $('.second-container').height();
$(window).scroll(function() {
if ($(document).height() - secondContainerHeight <= ($(window).height() + $(window).scrollTop())) {
var windowScroll = $(window).scrollTop();
} else {
}
});
}
caseStudyScroll();
Rather than using jQuery to handle the scrolling, you could use CSS transitions when you hit the trigger. When you hit the trigger, add a class/id that changes its top position by whatever amount puts it where you need. In the id/class of the second container, put the following:
-webkit-transition: top 1s;
transition: top 1s;
This will move the container to the new position in one second.
Hope that helps!
EDIT: Now that I think about it, I may have misunderstood your question. Do you want this to happen constantly, while scrolling up? That is, you want your second container to stay on the page while you scroll past the first one? In that case, changing the position to fixed in a similar method should work.
Related
I'm trying to fadeIn a div after I scroll to a certain point (pretty page on the middle of my first page). A good function that does that can be found here:
Show div on scrollDown after 800px
I'm talking about this one
var y = $(this).scrollTop();
if (y > 300) {
$('.bottomMenu').fadeIn();
} else {
$('.bottomMenu').fadeOut();
}
});
But the problem with this one is it doesn't hide the div if you haven't already scrolled past the point of the fade. I want to hide the div first and then show it when I scroll to it or past the point where I get to it (for me it's 300px).
I have tried:
setting the opacity of the div (or the header in the div) to 0: this didn't display anything at all. I did this since I saw that fadeIn() and fadeOut() are both transformations of the opacity. I wanted to first have it hidden by it's opacity and then let the function change it's values. It didn't work.
I think I need a function separate from this that checks if I haven't scrolled past the y point yet and if so it hides the div. And once I scroll to the y point the function should work as normal. But I have no clue how to write JavaScript.
I fixed it myself. I needed to type display: none to the div.
I am trying to create an effect similar to "Show div on scrollDown after 800px" answered by apaul34208 in this thread.
The problem is that I am also using this parallax effect on my website, which disables the normal window scroll, so the entire website is scrolling inside a certain div (.parallax) with 100% height. This also disables the desired effect.
Since the div I want to hide or show is supposed to be in fixed position it has to be located outside the scrolling .parallax div, but read the scroll position of the same div.
I have also tried solution from this thread, but I can't seem to make it work.
Right now I am using this script:
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 800) {
$('.bottomMenu').fadeIn();
} else {
$('.bottomMenu').fadeOut();
}
});
which is working fine on non-parallax pages except for that the fixed div is displayed when page loads on top, disappears when scrolling down 1 px only to appear again after scrolling down 800 px.
But I guess I can't use scrollTop in what I am trying to achieve.
Any suggestions?
Have you tried:
.bottomMenu {
display: none;
}
If not, it will be shown when the page is loaded (the scroll function is not fired because you haven't scrolled yet) and hidden if you start scrolling because the if statement is evaluated as false because the y position is <800 and $('.bottomMenu').fadeOut(); runs.
Similar to this unresolved question (jQuery - parallax - update background position correctly)
I am animating the transform property of an element on page scroll to achieve a parallax-like effect. I want this element to only begin animating up when it is in view. The problem now is that if the element appears further down the page, it has already moved up a lot and loses the effect.
Here is my code currently
function parallax() {
var scrolled = $(window).scrollTop();
$('[data-scroll]').css('transform', 'translateY('+-(scrolled*0.02)+'px)');
}
$(window).scroll(function(e){
parallax();
});
In answer to your question how to separate "parallax'ed" divs, so they shift their position independently from each other upon scrolling, one should rely on their unique coordinates - each one has it's own $(elem).offset().top - a general vertical offset from the top of the page (it's stays the same all the time unless you meddle with the TOP property manually).
so all calculation could be based against this property.
$('.parallax').each(function(){
if ($(this).is_on_screen()) {
var firstTop = $(this).offset().top;
var winScrollTop = $(window).scrollTop();
var shiftDistance = (firstTop - winScrollTop)*0.02;
$(this).css("transform":"translateY("+shiftDistance+"px)");
}
});
plus you check if the element is in the viewport. Thus, you assure it moves the same delta distance in its own time no matter where it's on the page - further down or up.
Another thing is that how to put "borders" of visibility of the element on the screen. If you are moving an element when it's in viewport, i would suggest making a wrapping div within which the movement occurs (like a bg moving within a div wrapper).
<div class="parallax-section slide1">
<span class="moving-block"></span>
</div>
div has a bigger height and we check when this div is on the screen, not the moving element.
demo
Also other modifications can be applied if one needs different speed, offset for each element. I found this plugin a good beginner stuff to learn parallax.
P.S. btw, all initial properties should be cached in variables instead of retrieving them each time in a callback, like firstTop for instance
I have a div that gets a 'fixed' class added to it once the user scrolls past a certain point in the parent div. The fixed class simply changes the child div from absolute positioning to fixed positioning.
However, a problem occurs when the user scrolls to a certain point when the 'fixed' class is added (as specified by the 'begin variable' in the js). The user loses the ability to scroll up or down for a number of seconds. And to make matters more complicated, this problem only occurs on the first of six parent divs that uses this code.
Here's the jquery code that adds the 'fixed' class:
var begin = 164;
$("#portfolio_window").scroll(function () {
var y = $(this).scrollTop();
if (y >= begin) {
$('.details').addClass('fixed');
} else {
$('.details').removeClass('fixed');
}
});
If I change the 'begin' variable to something like 600, the user loses the ability to scroll around 600px from the top of the div.
You can try to reproduce the problem at http://dev.zachboth.com/
Here's the easiest way that I've been able to reproduce the problem:
Use Safari
Clicking 'Various Logos' in the 'Work' section
Scrolling down quickly once the 'Various Logos' section appears
It may take several attempts to actually have the problem occur
I can explain your problem:
The problem is that on the "page" you mention being broken has you scrolling in div#portfolio_window. The position:fixed element you mentioned is positioned relative to the window. When you scroll on that element, it's trying to scroll the window (not the parent div).
http://jsfiddle.net/NThY7/
The solution is a bit more involved. I'll hop back on later with a solution.
I have a list of divs, and everytime I want to go to the next div I press a key. I need to check if that div is offscreen, and if so, I need to move the screen to show that div either using anchors or another method.
What is my best option for doing this?
Just to clairify, offscreen in my case means something that can't be seen right now without scrolling down. So if you are on the StackOverflow Home Page at the top, the last question on the entire page is offscreen.
Best option is to scroll your page to the element by getting its y-offset, and checking window height and calculating where to scroll page and then you can animate your page to that point.
//height of your div
var scroll = 250;
//animate from actual position to 250 px lower in 200 miliseconds
$(window).animate({"scrollTop": "+="+scroll+"px"}, 200);
so this is not the complete code but it might give you the idea.
check out jquery scrollTop
hope it helps,
Sinan.