We Keep Coding

getBoundingClientRect() showing different values on load vs scroll

I'm working on a site for a client and trying to implement custom parallax functionality. I have used the following code -
var inView = function(element) {
// get window height
var windowHeight = window.innerHeight;
// Get Element Height
var elementHeight = element.clientHeight;
// get number of pixels that the document is scrolled
var scrollY = window.scrollY || window.pageYOffset;
// get current scroll position (distance from the top of the page to the bottom of the current viewport)
var scrollPosition = scrollY + windowHeight;
var elementPosition = element.getBoundingClientRect().top + scrollY;
var elementScrolled = elementPosition + element.clientHeight + windowHeight
// is scroll position greater than element position? (is element in view?)
if (scrollPosition > elementPosition && scrollPosition < elementScrolled) {
return true;
}
return false;
}
// Get all the elements to be parallaxed
const parallaxElements = {
element: document.querySelectorAll('#header-image img'),
ratio: 0.25
}
// The parallax function
const parallax = elements => {
let items = [...elements.element],
itemRatio = elements.ratio
if ('undefined' !== items && items.length > 0 ) {
items.forEach( item => {
if ( inView(item) == true ) {
item.style.transform = 'translate3d(0, ' + (itemRatio * (window.innerHeight - item.getBoundingClientRect().top)) + 'px ,0)'
}
})
}
}
//If element is in viewport, set its position
parallax(parallaxElements)
//Call the function on scroll
window.onscroll = () => {
parallax(parallaxElements)
}
It's working ok except that when the page is loaded initially and the user starts scrolling, the position of element (#header-image img in this case) changes abruptly. I did some digging and noticed that the value of getBoundingClientRect().top is causing the issue.
When the page is loaded, it has some value, and as soon as the user starts scrolling, it abruptly changes to another value.
I am not able to figure out why this is happening. getBoundingClientRect().top is supposed to get the value of element from top of viewport, right?
Any help is greatly appreciated. Thanks!
Pls check the screenshot of inspect element here -
https://i.stack.imgur.com/RYDvK.jpg

Jquery scroll with scrollTop Position is really slow to scroll

I have infinity scroll and each time the top scroll reach to certain part of the div, it loads a new content until its over. But each time it loads, it get very slow. It happens when I put some code inside of .each function, and that my scroll becomes really slow, which is annoying. I don't know how to fix it
function scrollAnimationFrame(ticking, windowHeight, tabSelected){
if (!ticking) {
window.requestAnimationFrame(function() {
scrollEvent(tabSelected, windowHeight);
ticking = false;
});
}
ticking = true;
}
function scrollEvent(tabSelected, windowHeight) {
var activeTab = document.getElementsByName(tabSelected)[0]
var divResults = activeTab.getElementsByClassName('div-content');
var scrollY = window.scrollY || document.documentElement.scrollTop;
var pos = $(window).scrollTop();
var scrollY = window.scrollY || document.documentElement.scrollTop;
$(divResults).each(function(i, el){
var posOutsideDiv = $(el).offset().top + $(el).outerHeight();
var inside = (scrollY >= $(el).offset().top && scrollY <= posOutsideDiv - 150)
if(inside){
toggleThead(el, "visible");
} else if(scrollY >= $(el).offset().top && scrollY <= posOutsideDiv + $(document).height()){
toggleThead(el, "hidden");
} else {
toggleThead(el, "visible");
}
});
}

Okay, I thought it was javascript that the scroll is getting slower each time appending a new content. So I checked at AngularJs and I was reusing the directive template. So basically create two directives for each template and voilá(Hated doing this). No more slow scroll.

How to add a jQuery scrollTop offset?

I'm trying to get the div to snap to the center of the viewport, right now it just snaps to the top. I was trying to put an offset of 50% but can only get it in px's.
EDIT
I added a new fiddle where I tried to include $(window).scrollTop() / 2)
http://jsfiddle.net/kZY9R/84/
$("#item").offset().top - 100
var body = $("html, body");
var items = $(".item");
var animating = false;
$(window).scroll(function() {
clearTimeout($.data(this, 'scrollTimer'));
if (!animating) {
$.data(this, 'scrollTimer', setTimeout(function() {
items.each(function(key, value) {
if ($(value).offset().top > $(window).scrollTop()) {
animating = true;
$(body).stop().animate( { scrollTop: $(value).offset().top }, 1000,'swing');
setTimeout(function() { animating = false; }, 2000);
return false;
}
});
}, 50));
}
});

I found this:
$('html, body').animate({scrollTop: $('#your-id').offset().top -100 }, 'slow');
Source: Run ScrollTop with offset of element by ID

Here's the trick to keep your viewport centralized on a particular div.
Prerequisites
You need to take into account the following three criteria to be able to centralize the viewport on a given item:
height of the last item that appeared on the viewport.
The distance of the last item from the top of the page, i.e. the offset().top of the item.
The height value of the viewport (i.e the window object).
Calculating Vertical Position of the Item
The required scrollTop value for the window can be calculated as in the following:
var scrollValue = itemOffset // offset of the item from the top of the page
- .5 * windowHeight // half the height of the window
+ .5 * itemHeight; // half the height of the item
You are basically, moving the top of your viewport to the item under view's top offset initially. This, as you've already experienced, snaps the item to the top of the window.
The real magic part comes when you subtract half of the window's height to go halfway along it vertically, and then shifting your view back down by adding half the item's height. This makes the item appear vertically centralized with regards to the viewport.
Note:
To be able to query the last item that appeared on the viewport, you have to iterate over all of the elements that have a top offset value (i.e. offset().top) less than or equal to that of the window's scrollTop value:
$.each($('.item'), function(i, value) {
if ($(viewport).scrollTop() >= $(this).offset().top) {
lastItemInView = $(this);
}
});
With the above, the lastItemInView variable will always end up with the last element visible in the window.
Demo

Not sure if you figured this out yet or not but I took some code from this answer (How to tell if a DOM element is visible in the current viewport?) that shows how to tell if an element is visible in the view port.
Using that I modified your code to loop through each item and find the first visible one in the viewport and then center that one also factoring in the margin-top you have. Let me know if this helps!
Fiddle: http://jsfiddle.net/kZY9R/86/
var body = $("html, body");
var items = $(".item");
var animating = false;
$(window).scroll(function() {
clearTimeout($.data(this, 'scrollTimer'));
if (!animating) {
$.data(this, 'scrollTimer', setTimeout(function() {
items.each(function(key, value) {
if (elementInViewport(value)) {
animating = true;
var margin = parseInt($(value).css('margin-top'));
$('html,body').animate({
scrollTop: $(value).offset().top - ($(window).height() + margin - $(value).outerHeight(true)) / 2
}, 200);
setTimeout(function() {
animating = false;
}, 2000);
return false;
}
});
}, 50));
}
});
function elementInViewport(el) {
var top = el.offsetTop;
var left = el.offsetLeft;
var width = el.offsetWidth;
var height = el.offsetHeight;
while (el.offsetParent) {
el = el.offsetParent;
top += el.offsetTop;
left += el.offsetLeft;
}
return (
top < (window.pageYOffset + window.innerHeight) &&
left < (window.pageXOffset + window.innerWidth) &&
(top + height) > window.pageYOffset &&
(left + width) > window.pageXOffset
);
}

Refresh position left element when browser resize

I have the following JavaScript code.
var x = $('.sidebar').offset().top,
offsetY = $('.left-columns').offset().left + $('.left-columns').width();
$(window).scroll(function(){
var scroll = $(this).scrollTop();
if(scroll >= x){
$('.sidebar').addClass('active1');
$('.active1').css({left:offsetY});
}else{
$('.sidebar').removeClass('active1');
$('.active1').css({left:0});
}
});
$(window).resize(function(){
x = $('.sidebar').offset().top,
offsetY = $('.left-columns').offset().left + $('.left-columns').width();
});
It works fine, but when I resize the browser window, then the problems begin with the positioning element

I have no idea what you are trying to achieve but I'm guessing that you need to reposition the .sidebar1 and .active1 elements when the window resizes. By that I mean, on the resize handler, do exactly the same you are doing on the scroll handler...
$(window).scroll(updatePosition);
$(window).resize(updatePosition);
function updatePosition(){
x = $('.sidebar').offset().top,
offsetY = $('.left-columns').offset().left + $('.left-columns').width(),
scroll = $(this).scrollTop();
if(scroll >= x){
$('.sidebar').addClass('active1');
$('.active1').css({left:offsetY});
}else{
$('.sidebar').removeClass('active1');
$('.active1').css({left:0});
}
}

You need to put your conditions in both events, it has problems if you just put in .scroll event only because it doesn't respond in .resize() event, also if you make a separate function that will be reusable:
function scrlResize(){
x = $('.sidebar').offset().top,
offsetY = $('.left-columns').offset().left + $('.left-columns').width(),
scroll = $(this).scrollTop();
if(scroll >= x){
$('.sidebar').addClass('active1');
$('.active1').css({left:offsetY});
}else{
$('.sidebar').removeClass('active1');
$('.active1').css({left:0});
}
}
$(window).scroll(scrlResize);
$(window).resize(scrlResize);

Resizing needs Refresh

So What I am trying to do is I have 3 div each div should scroll over the another div and when it reaches the top it's position should be fixed.
So everything is working fine until we resize the window(It needs refresh of page).
How to fix this ? I mean can't we do this without refreshing the page ?
I used resize but it's not working for me. And I'm not sure whether this is the right way of using resize
The JSFiddle copy of my work
var $cache = $('#two');
var $cache2=$('#three');
var vTop = $cache.offset().top - parseFloat($cache.css('margin-top').replace(/auto/, 0));
var vTop2 = $cache2.offset().top - parseFloat($cache2.css('margin-top').replace(/auto/, 0));
$(window).scroll(function (event) {
var vTop = $cache.offset().top - parseFloat($cache.css('margin-top').replace(/auto/, 0));
var vTop2 = $cache2.offset().top - parseFloat($cache2.css('margin-top').replace(/auto/, 0));
});
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y >= vTop) {
$cache.addClass('stuck');
$('#one').addClass('stuck');
$('#two h2').addClass('stuck');
} else if(y>=vTop2)
{
$('#two h2').removeClass('stuck');
}
else {
$cache.removeClass('stuck');
$('#one').removeClass('stuck');
$('#two h2').removeClass('stuck');
}
});

Use window.onresize to handle elements:
window.onresize = function(event) {
//handling code in between
}