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.
Related
I am trying to animate a line on scroll but I am at a loss at the moment. The final result should be similar to how the lines animate on this site, http://www.teslamotors.com/goelectric#range (you have to scroll a little bit to get to the lines).
There is a static gray line, and then a red line that gets height when the user scrolls down. If the user scrolls up while part, or all of the red line is visible, height will be subtracted from the red line. BUT nothing should happen to the red line until the user has scrolled 200px down the page.
I have created a fiddle for this problem and I am pretty sure I know where my problem lies, but I do not have an answer for how to fix it. I think it is because my variables currentScrollPosition and lastScrollPosition in function countUp135 are always equal to each other.
Any help would be greatly appreciated. Here is my fiddle:
http://jsfiddle.net/tripstar22/2HDVA/5/
Thanks in advance!
Although there is many ways to do this in JS, I'll offer an alternative css method. Instead of animating a line on scroll you can just give the illusion that the line is animating. Check out this fiddle here. As you can see The fixed red element will follow the window on scroll and fill in the transparent area between the divs, making it seem like a red line is being drawn.
You can overlay an image with a transparent line running through it instead of grey divs to minimize the code even more, or you can add js to make the animation more fancy.
There are a lot of functions in your fiddle, where I do not understand why you should need them nor what they do. An updated version of your fiddle, seems to do what you want. There was no need for all thoses methods.
This seems to be enough:
var scrollTop = getScrollTop();
if (scrollTop > 200) {
addHeightPath1(scrollTop - 150);
} else {
addHeightPath1(0);
}
I'm also wondering about the function stoppedScrolling, where an asynchronous time function is beeing started, but you try to get an result from the stoppedSrolling() function, that is never passed as a return.
Any idea how make a layout like google plus or facebook. You can see at google plus home as example,
at the beginning, if you scroll the page in the main content, they will scroll together (friend post and sidebar), but when you scroll until the bottom of sidebar (in the right of friend post), that sidebar will stop scrolling , but the another content (friend post) will still scrolling. can explain to me how to make layout like that? sample code or demo will be very help.
Fixed positioning with CSS is a very limited approach. There are a number of ways to do this style of "fixed" areas, many of which have already been given in answers to similar questions on here (try the search above?).
One technique (which many are based on) is like so (in brief)..
Capture the browser's scrolling
Get the position from top of chosen element (x)
Check if the scrolling > x, if so apply a class to the element to fix it to a certain position.
The same will work in reverse, for example:
var target = $('#div-to-stick');
var div_position = target.offset().top;
$(window).scroll(function() {
var y_position = $(window).scrollTop();
if(y_position > div_position) {
target.addClass('fixed');
}
else {
target.removeClass('fixed');
}
}
Note: Depending on how you chose to complete the code above, the page will often "jump" as the div's position is modified. This is not always a (noticeable) problem, but you can consider getting around this by using .before with target.height() and appending a "fake" replacement div with the same height.
Hope this helps.
The new approach with css3 is reduce your effort. use single property to get it.
position:sticky;
here is a article explained it and demo.
article
Demo
You are looking for CSS position:fixed (for the scroll-along sidebar), you can set the location with left:[length], right:[length], top:[length], bottom:[length] and the normal width and height combos
You will need to augment it with a window resize and scroll listener that applies the position:fixed property after the window has scrolled past the top of the sidebar.
Use css property (position:fixed). This will keep the position of the div fixed even if you scroll down or scroll up.
I need to have a simple pop up rectangle, preferably with jQuery or some such, that simply brings up a scaled down canvas (say, 1:2, representing a 1000px x 1600px browser window) that can be clicked on to get the x/y position in the full window.
It's really just a simple, visual way to help a client position content on a page (it has to be completely at their control, not on a grid).
Does anyone have an idea of something out there that already does something like this? (I'm looking for the wordpress admin, but should be able to work anything in pretty much).
Edit to clarify. Here is what I'm thinking might work if there is nothing out there that does this:
If you click a button, jQ an absolute positioned div (lightbox style), of the sized I talked about, then close the div upon clicking it, but somehow get the x/y position in the div where it was clicked and then scale this with some maths...
I think the thing I don't know how to do here is getting the x/y position relative to the size of the specific div.
Sorry, I think this is maybe a bit of a terribly worded question.
$('#popup').css("top", ($(window).height()) / 2 + $(window).scrollTop() + "px");
$('#popup').css("left", ($(window).width()) / 2 + $(window).scrollLeft() + "px");
your canva need to be set to
position: relative
then anything inside this element can be set to
position : absolute
top: [your Y position from top side of the canva]px;
left: [your X position from left side of the canva]px;
Absolute position always refers to the first element that has no default positionning, in this case relative.
I realize there's already been several questions like this, but I think my case is a little different.
I have an div that I am absolutely positioning and floating on top of the page, and I'm setting an overlay behind it to grey out the rest of the page. I have it working okay until you scroll up and down the page.
The problem is, when the div appears, it is still populating with ajax data. So the height and width of the bg overlay has already been set, but once all the data loads into the floating div, it sometimes pushing the page down so the height increases. So, I can't calculate the height and width of the window or document because the floating div might not be fully loaded yet, and once it does, it pushes the screen down further, causing the bg overlay to not cover the whole page.
So for example, in the code it's going something like:
loadBoxContent = function(){
..DO AJAX HERE..
..PUT CONTENT INTO FLOATING DIV..
$('#floatDiv').show()
$('#darkOverlay').height($(window).height());
}
I verified this by adding an alert, so that by the time I've clicked the alert, the bg overlay was able to calculate the true page size, and it looks fine.
Sorry, if this sounds confusing but hopefully you get what I'm trying to achieve. I'm assuming this isn't too difficult, but I haven't been able to figure it out.
Any help would be appreciated, I'm using jquery.
Thanks
Overlay ;)
** update, setting position of all corners to 0 instead of using width/height 100% **
$("<div/>")
.css({
position:"fixed", // ze trick
background:"#000",
opacity:.5,
top:0,
bottom: 0,
left:0,
right: 0,
zIndex: 2999 // everything you want on top, gets higher z-index
})
.appendTo("body");
Or put the above css settings in a css stylesheet (opacity needs cross browser hacks).
$("#dark-overlay").show();
Here is the solution :
JQuery Show Loading Plugin
Don't try to invent the wheel !!!
Here is a demo :
Loading Demo
Now you just need to create a main container div for your page and just ask this simple plugin to do it for you.
Maybe you want to read the plugin source and find how it works...
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.