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
Related
I would like an image to become fixed where it is once it appears on screen during a scroll, but become unfixed if the user scrolls back up.
However, when I use a JS on scroll function to change the image position to fixed, it suddenly "jumps"/resizes, and I'm not sure why. My fix was to create variables that alter the width and left values of the image after it becomes fixed, but I want to do this will multiple images on a page and each one seems to require a different width and left adjustment. I'm not sure what is conceptually causing this issue. Simply resetting the width and left to their original values does not work. Does a fixed position resize and image.
Here is a jsfiddle of the issue. And here is the code. JS:
var sitckyImageWidth = "38.4%";
var normalImageWidth = "48%";
document.addEventListener("scroll", function(){
var windowTop = $(window).scrollTop();
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
//loop through each div and grab top/bottom/midpoint info and find id
$('.articles').each(function(i){
var top = $(this).offset().top;
var bottom = top+ $(this).height();
var midPoint = (bottom+top)/2;
var thisId = this.id;
var newId;
//use container div info to find media info
var newId = thisId+"Media";
var sectionImage=document.getElementById(newId);
var sectionImageTop = $(sectionImage).offset().top;
//if article is on the page, change position to fixed and set top position
if (top<=windowTop&&bottom>windowTop){
$(sectionImage).css("top","10px")
$(sectionImage).css("position","fixed")
//$(sectionImage).css("width",sitckyImageWidth)
}
//if container is not at top of the page, return to relative
if (bottom<=windowTop||(bottom>windowTop&&top>windowTop)){
$(sectionImage).css("position","relative")
}
})
}); //end scroll
Position fixed means that an element will have relative sizes and positioning in relation to the viewport, not their parent elements.
Specifically what is happening here is that your div with ID article1Media is set to have a width of 48%. When it has the CSS property of position: relative then that resolves as 48% of the width of it's containing element (the div with id article1) however when it is position fixed that resolves as 48% of the width of the viewport. Since there is an implicit 8px margin on the <body> element then these are different.
There are a few different solutions to this, and how you tackle it depends on how you want to build your site.
Example fix 1
A simple fix for your immediate example is to simply add the following CSS.
body{
margin:0px;
}
.image{
margin:8px;
}
https://jsfiddle.net/Chipmo/k56qkk5b/13/
This moves the implicit margin onto the image element. Of course you can set it to whatever you like, or omit it entirely.
Look into CSS resets for more information about overriding implicit default styles, though be warned that it is possible to cause problems with overzealous reset codes.
( Edit: To be clear the above code is definitely not a drop in code for this problem everywhere. It will only work on quite simple HTML pages like your jsFiddle. )
Example fix 2
Another technique you could consider is locking the width and height to it's initial values using jQuery .width() and .height() functions. This would be inflexible, and you would have to do extra work to make it responsive (for mobile etc), but could be appropriate in some circumstances.
Example fix 3
A more portable solution might be to eschew relative sizing in favour of fixed widths and then use CSS media queries for reponsivity. Something like this:
.image{
width:500px;
}
#media(min-width:800px){
width:300px;
}
Example fix 4
If you wish to preserve the 'fluid' nature of using percentages I would suggest looking into using calc along with an offset that gets applied when the position is fixed (so, you add a class when you make the image fixed) that adjusts the sizing appropriately.
.media.image-fixed{
position:fixed;
width:calc(48% - 8px);
}
See this example https://jsfiddle.net/Chipmo/6mu2Lt9g/2/
Above behavior is observed since because of applying the position property not because of the scroll.Please take a look at the following link Position Properties
Position Fixed : Fixed position elements relative to document not on
any parent container.Hence occupies the complete width available.
Position Relative: Relative positioned elements behaves relative to hosted
containers.And inner elements consumes the hosted parent width.
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.
Ok, the subject is not super specific to the overall need I am looking to address. So I have this function that is called on a given element, which is a hidden submenu next to a triggering element. The way the page renders, and to keep the styling optimized I can't just style the position in via css. So I need javascript/jquerys help.
With that I have come up with a function that I can reuse as needed, and works fine all around. However my key problem is, that I have a couple cases where the submenu will overlap the edge of the <section> element it resides in. Which that elements overflow is set to hidden, that and its also about 30 pixels from the bottom of the page anyway. All in all the submenu element gets hidden a bit by either falling completely out of the pages view half way through the element, or it gets hidden by the section tags overflow state.
With that. In a case where this happens I am wanting to instead of have the element align to the bottom of the trigger element, have it align to the top instead so that way the menu in that case is above the trigger element and not below.
Problem is Im not sure how to compensate for that.
Here is the function I came up with to do what I need, now I just need some help in a sense catching when the menu element falls off the page so to speak, so I can adjust for it when it does.
function openSubOrgMenu(triggerID, elem)
{
orgSubOpenID = triggerID;
orgSubShowing = true;
elemOffset = elem.offset(); //trigger element
elemWidth = elem.width();
elemHeight = elem.height();
elemWrap = elem.siblings('.org_group_wrapper');//menu element
elemWrapWidth = elemWrap.width();
elemWrapHeight = elemWrap.height();
moveTop = elemHeight + elemOffset.top + 4;
moveLeft = elemOffset.left - (elemWrapWidth-elemWidth-15);
elemWrap.show().offset({top:moveTop, left:moveLeft});
}
Well here is a JS Fiddle, not necessarily showing a working logic of what I want, but demonstrating the desired effect when its an element that at the bottom of the page/section:
http://jsfiddle.net/4zwEr/
This is a follow up question to How can I stop an IFrame reloading when I change it's position in the DOM? if you want the background.
I have an inline div <div id="leaderboard-slot"></div> (with a fixed width and height) and another div ("leaderboard-loader") further down the page with the actual content for that div.
For various reasons (see previous thread), I am unable to simply do an appendChild or similar.
Instead, I'm hoping to position leaderboard-loader such that it takes up the space "reserved" by leaderboard slot. I've used some jQuery methods to do this:
var loader = $('leaderboard-loader');
var dest = $('leaderboard-slot');
var pos = dest.getPosition();
loader.setStyle('top', pos.y + 'px');
loader.setStyle('left', pos.x + 'px');
which I fire on document load and resize. However, if other elements within the page cause a reflow, then the target div moves, but the loader doesn't.
Is there a safe way of doing this - it needs to work when I know nothing else about the page (ie I can't just make this call on any other methods that might cause a reflow, because I don't know what those are).
Any help would be much appreciated - thank you :)
If I understand your question correctly, there is no need for Javascript. Just put leaderboard-loader in front of the leaderboard-slot tag, give it position: absolute and identical width and height. If slot is a normal element, loader will float above it and cover it perfectly.
<div id="leaderboard-loader"></div><div id="leaderboard-slot"></div>
I'm starting to regret my answer now. Hopefully you can find something better than the absolute positioning workaround. But, in the spirit of kludgey solutions, you could call the repositioning script on a timer. sigh.
You could put them both in the same relative positioned, 0 margin div, with the temporary div z-indexed on top of the slow loader.
Make them both absoluely positioned in the parent, not the window, at 0:0 and the same size.
You can use opacity and fade one in as you fade the other one out, or just swap visibility:hidden and visible for the two elements when you are ready..