We Keep Coding

Initializing Parallax position values after page refresh

This may well have been asked before but I have an issue with a parallax effect I have deployed on an image slider. On scroll, the background images being used in the slider adjust their position and their opacity.
The problem is if I scroll a short way down the page and then refresh the page, the background position and the opacity revert to their original values, so then scrolling causes a jump in order for them 'catch up' on what their actual values should be.
I'm trying to figure out how I can have the values automatically set no matter what position the page is in when it's refreshed.
Here is the code that I have currently
//HomepageParallaxFade
window.addEventListener('scroll', function () {
var scrollPosition = window.pageYOffset;
var bgParallax = document.getElementsByClassName('carousel-cell');
Array.prototype.forEach.call(bgParallax, function (el) {
var limit = el.offsetTop + el.offsetHeight;
if (scrollPosition > el.offsetTop && scrollPosition <= limit) {
el.style.backgroundPositionY = (50 + 90 * scrollPosition / limit) + '%';
el.style.opacity = (1 - 1 * scrollPosition / limit);
} else {
el.style.backgroundPositionY = '50%';
}
})
});
Happy to provide a JSFiddle if necessary. All help much appreciated

You can do parallax with pure css.
https://www.digitalocean.com/community/tutorials/css-pure-css-parallax.
From there, when you refresh if you set the scroll position with javascript, the parallax will just work.

Javascript scroll addClass

I want my navbar to be transparant on the top and bottom of my page but i want it to not be transparant in the middle. When i have my webpage on full screen this works:
$(window).on("scroll", function () {
if ($(window).scrollTop() > 720 && $(window).scrollTop() < 1450 ) {
$(".nav").addClass("active");
} else {
$(".nav").removeClass("active");
}
})
But when it gets resized this wont work anymore because the sizes change. Is there a way to do this with % instead of just normal numbers so it will be responsive?

It occur because you hardcoded your height values. Check the whole site height, divide it on three and incorporate this variables to your if statement. Every time you resize browser window it will recalculate your new position.
window.addEventListener('resize', function() {
//one third and two third of website
oneThird = window.scrollHeight / 3;
twoThird = onethird * 2;
if ( $(window).scrollTop() > oneThird && $(window).scrollTop() < twoThird ) {
$(".nav").addClass("active");
} else {
$(".nav").removeClass("active");
}
}

You can use Media Queries with JS too, so you can do certain things on your desired window size, this might help https://www.w3schools.com/howto/howto_js_media_queries.asp

Javascript DIV Movement on scroll

NIm creating an animation that moves a div incrementally on scroll. I'm close but I don't think my code is the most efficient and I don't know how to adapt it to add more arguments. So for instance, hitting a certain height on the page will then move the object right and stop moving it down. Below is my JS and the codepen can be found at;
http://codepen.io/anon/pen/KxHwu - Original
http://codepen.io/anon/pen/DLxqg - Messing about with moving right
var lastScrollTop = 0;
var boxPosition = $('#box').position();
var row2Position = $('#row2').position();
var distance = $('#row2').offset().top,
$window = $(window);
console.log(distance);
$window.scroll(function() {
if ( $window.scrollTop() >= distance - 400 ) {
var st = $(window).scrollTop();
console.log(st);
$('#box').css({top: 0 + st});
//CODE NOT WORKING
if(st >= 270) {
var boxPos = $('#box').position();
console.log(boxPos.left);
$('#box').css({left: boxPos.left + st});
}
//
lastScrollTop = st;
}
});
I'm looking for the box to start scrolling like it does, then when it hits half of row 2 scroll right.
I hope I have explained this in an easy way!
Thanks

http://codepen.io/anon/pen/tHwlq
Here is an example of how to do it; you'll need to tweak the numbers to make it work as you plan.
var $window = $(window);
var $box = $("#box");
$window.scroll(function() {
var scrollTop = $window.scrollTop();
if (scrollTop >= 250 && scrollTop < 400) {
$box.css({top: -250 + scrollTop});
} else if(scrollTop >= 400 && scrollTop < 600) {
$box.css({left: (50+(scrollTop-400)/2)+"%"})
}
});
If your project has numerous elements like this, I'd recommend the ScrollMagic (http://janpaepke.github.io/ScrollMagic/) library.
As far as efficiency is concerned I'd recommend the following:
1) Cache the jQuery selectors (note $box variable). Otherwise, jQuery will have to query the DOM on every scroll event.
2) Cache scrollTop rather then querying it multiple times within the event callback.
3) Although left and top work, using the transform: translate() property is more efficient, especially on mobile devices. (https://developer.mozilla.org/en-US/docs/Web/CSS/transform). However, on most mobile devices, scroll events only fire at the completion of a scroll, not while a page is scrolling.

ScrollTop equal a value not working

I'm trying to run a script when scroll position is a certain value.
Why is this not working?
<script type="text/javascript">
$(document).scroll(function () {
if ($(document).scrollTop() == 1500) {
$.scrollLock(true);}
});
</script>
When i change == to >= it does work, but that is not what I want. I want it only to work at 1500.

When you scroll in a browser the scrollbar doesn't go down in 1px segments, it jumps around. In Chrome, scrolling by one segment takes you up or down by 100px (see this demo).
What you can do is be a bit flexible with your value. Rather then wanting it to fire at exactly 1500px, you can set it to fire between 1450 and 1550. This should capture the scroll in most browsers:
var scrollTop = $(document).scrollTop();
if (scrollTop >= 1450 && scrollTop <= 1550) {
$.scrollLock(true);
}
You can then take this a step further by forcing it to 1500 if it falls within that range:
if (scrollTop >= 1450 && scrollTop <= 1550) {
$(document).scrollTop(1500);
$.scrollLock(true);
}
JSFiddle demo.

jQuery scroll page so cursor stays at the "logical center"

i have a huge html form , with near 350 controls that take 5-6 times of the user screen height.
user starts completing each input field from the beginning of the page and goes on.
once the cursor rich near the bottom of screen user must be able to see some next input fields so here is the problem :
i want to avoid the scrollbar usage.
i want to set some "margines" ( say 200px for each page side )
if user clicks a control that is near the screen edge, here this mechanism must work also
i'm looking for a jQuery solution
playing around with jQuery.ScrollTo, but can't figure out how to embed my logic into code.

This should do it
http://jsfiddle.net/JsWnk/
$(document).ready(function() {
$('input').focus(function() {
var padding = 100; // Desired page "padding"
var lbound = $(this).offset().top - $(window).height() + padding;
var ubound = $(this).offset().top - padding;
if ($(window).scrollTop() < lbound)
$(window).scrollTop(lbound);
else if ($(window).scrollTop() > ubound)
$(window).scrollTop(ubound);
});
});
​

Something like this should work...
http://jsfiddle.net/q9QHQ/
$(document).ready(function() {
$('input').focus(function() {
if ($(this).offset().top > 100)
$(window).scrollTop($(this).offset().top + 100);
});
});