JSFiddle: https://jsfiddle.net/q6q499ew/
So far, I have a very basic system to start with, so if you scroll past a certain point it should become stuck until you start scrolling back up.
$(".body").scroll(function(){
$(".mainContent").toggleClass("stickyBottom", $(this).scrollTop()>1040)
}).scroll()
I would like to be able to have it so that, regardless whether the sidebar or main content is greater in height, the one which is least tall will stop when it is at the bottom of the div, scrolling back up will scroll both until one reaches the top but the other can still scroll.
You were on the right track, but ultimately what you want to do is use an if statement to addClass("stickyBottom") when the scroll is beyond 1040 and removeClass("stickyBottom") when the scroll is less than 1040.
$(".body").scroll(function() {
if ($(this).scrollTop() > 1040) {
$(".mainContent").addClass("stickyBottom");
} else {
$(".mainContent").removeClass("stickyBottom");
}
});
Working example.
Related
Is there any way to make an image move up when users scroll the page? I have 2 square images (each 400px in wide and height), both are visible. The left image is fixed by position. The right image is positioned 200px below the left image. I need to make the right image to move up by 200px (get aligned with the left image) when we scroll the page. Then the it stays still on that position.
I found the one on this page is quite the same with what I'm trying to create http://jessandruss.us/#waiting The difference is my images are all visible, while on this page the overflow of the left image is hidden and it gets back to its original position when users scroll up.
Really appreciate any help on this matter. Thank you.
$(document).ready(function(){
var aligned = false; // A flag to tell us when the images are aligned
$(window).scroll(function(){
if($(this).scrollTop() == 192 ) { // when the window scroll to the alignment point...
aligned = true; // the images are aligned
}
if (aligned) { // if they're aligned...
$(".image-2").css("top", 8 + $(this).scrollTop()) // match .image-2's top css property
} // to the window's scrollTop value, +
// 8px for the body's margin.
})
})
Here's a JSFiddle with what I think you want.
There's simply a boolean to tell us when the images are lined up. When they are, image-2's CSS property 'top' is matched to the window's scrollTop value.
The boolean variable is currently hard coded to tell us when the images are lined up (I looked at the window's scrollTop value when they were lined up, 192 in this case). This isn't a great approach since it won't account for changes in the images' positions or sizes, but this should be enough to get to going.
EDIT
https://jsfiddle.net/eLdo0s3w/5/
Here's another method to achieve the same result. As long as having the second image position: fixed is OK, then it should be more efficient, and will hopefully avoid the jumping around that OP says happened with the first method.
It targets image-2's top CSS property and matches it to the window.scrollTop value, until image-2 reaches the necessary point.
Again, this code isn't very reusable, but it should work fine for a one-off situation. If anyone wants improve on it, please do so!
Sounds like you need to use jQuery to link the picture's transform: translateY() property with scrollTop(). It's a little hard to explain in words, but if you provide a jsfiddle I'll show you what I mean.
I've got three DIVs right under each other along the flow of the document, and all except the first DIV is set to display: none;. Therefore the first DIV (main_content) is the only DIV of the three that's visible when the page loads.
I need a jQuery script that would allow the next DIV to appear, and scroll to the top of the viewport (for clarification, this increases the document height) when the user has scrolled to the bottom of the page I also need the script to hide the newly appeared DIV when the user scrolls back up.
This is what I have to far; it works but there's some weird looping going on.
$(window).scroll(function(){
showDiv();
});
function showDiv(){
if( $(window).scrollTop() + $(window).height() >= (($(document).height())-10)){
$("#main_content2").fadeIn(1000);
$('html,body').animate({scrollTop: ($("#main_content2").offset().top - 88)}, 800);
$(document).height('auto');
$(window).height('auto');
}else{
$("#main_content2").fadeOut();
$(document).height('auto');
$(window).height('auto');
}
}
Not sure if my question is clear to you guys but let me know and I'll try to word things a little better. Thanks in advance.
EDIT: Thanks for the reply freedom. But this is not what I was looking for. I do not want the next DIV to affix to the top. I want the next DIV to appear, and snap to the top when the user scrolls to the bottom of the document. After the DIV snaps to the top the user is able to scroll through it as he would normally until he reaches the bottom of that DIV and then next DIV (3rd) appears and snaps to the top. I apologize if I wasn't clear enough before.
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.
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 HTML-page with several DIVs and a function named 'fullscreenCSS' wich takes care of the DIVs being fullscreen.
When I scroll using the scrollbar, I want the current DIV to stay at its position (if scrolled to the end of that DIV) and the next one slides over it. I think the current DIV temporarily got to have a position 'absolute' or 'fixed' untill the next one has reached the top of the screen. Does anybody have an idea how to do this?
A first attempt can be seen on: http://www.84media.nl/project/couch/
How's this look?
http://jsfiddle.net/Tgm6Y/2227/