We Keep Coding

How to change sticky element depending on scrolling through several section on JS/jQuery?

I need to change the sticky image (by changing class or changing URL attr) while scrolling past several text sections.
Asana on their home page has an exact example
check the gif animation here
In front of text section 1 - image 1,
while we scroll near text section 2 - image changes to 2nd, and so on.
When scrolling back to the top, the same logic, each image appear in front of it's text section.
If there would be only 1 breakpoint, I used code like this:
$(window).scroll(function () {
if ($(window).scrollTop() >= offset) {
$(".image").addClass("active");
} else {
$(".image").removeClass("active");
}
});
But since there could be much more sections I need another solution.
Any ideas? Thanks in advance.

I think this is the pattern you are looking for:
$(window).scroll(function () {
image1();
image2();
image3();
});
function image1() {
var min = 0;
var max = 400;
if(window.scrollY >= min && window.scrollY < max) {
$("img").attr("src","https://cdn.picpng.com/head/head-the-dummy-avatar-man-tie-72756.png");
}
}
function image2() {
var min = 400;
var max = 800;
if(window.scrollY >= min && window.scrollY < max) {
$("img").attr("src","https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRlfO4xTPtZVZfQCZqpaoOV4_c3G-OMUJ00IU0fy8wnDOZzud3N2xYnMrzJbXLCs7vlmWM&usqp=CAU");
}
}
function image3() {
var min = 800;
var max = 10000;
if(window.scrollY >= min && window.scrollY < max) {
$("img").attr("src","https://www.unite2canada.com/images/dummy-user.png");
}
}
You can see this piece of code at work right here

Maybe for somebody, it will be helpful, so I will post my solution.
Thanks to Alex, I changed logic: I left only one image and on scroll, I change src attr.
$(window).scroll(function () {
let index, txtPosition, imgPosition;
$('.text-item').each(function () {
index = $(this).index();
txtPosition = $(this).offset().top;
imgPosition = $('.image-item').offset().top + 50;
if (txtPosition < imgPosition) {
$('.image-item img').attr('src', $(this).attr('data-image'));
}
});
});

JS function that scrolls an element into view taking into account possible scrollable and positioned parent

I was looking for a function that would scroll a given element into view with some smart behavior:
if an element is descendant of a scrollable element - that ancestor is scrolled rather than body.
if an element is descendant of a positioned element - body won't be scrolled.
I didn't find any suitable function, so I made one and wanted some expert opinion on it. Please check the plunkr http://plnkr.co/edit/DNGWLh5cH1Cr1coZbwpa?p=preview . There are problems with animated scroll in FF, so please use Chrome to check the logic.
To illustrate, what I'm looking for - here is the first update that came to mind - if we reached an element that can scroll, lets call it SC (Scroll Parent), we should not only scroll SC to make the target visible inside it, but also recursively scroll SC itself into view, since it may outside of the currently visible are of the page. Here is the update plunkr http://plnkr.co/edit/DNGWLh5cH1Cr1coZbwpa?p=preview (also applied fix for FF scrolling problem).
And here is the code of the function
function scrollTo(target){
//Position delta is used for scrollable elements other than BODY
var combinedPositionDelta = 0;
var previousParent = $(target);
var parent = $(target).parent();
while(parent){
combinedPositionDelta += previousParent.position().top - parent.position().top;
//If we reached body
if(parent.prop("tagName").toUpperCase() == "BODY"){
scrollBody(target.offset().top);
break;
}
//if we reached an element that can scroll
if(parent[0].scrollHeight > parent.outerHeight()){
scrollElementByDelta(parent,combinedPositionDelta);
//Recursively scroll parent into view, since it itself might not be visible
scrollTo(parent);
break;
}
//if we reached a apositioned element - break
if(parent.css('position').toUpperCase() != 'STATIC'){
console.log("Stopping due to positioned parent " + parent[0].outerHTML);
break;
}
previousParent = parent;
parent = parent.parent();
}
}
var offsetSkin = 20;
function scrollElementByDelta(element,offsetDelta){
$(element).animate({
scrollTop: element.scrollTop() + (offsetDelta - offsetSkin)
}, 1000);
}
function scrollBody(offset){
$('body,html').animate({
scrollTop: offset - offsetSkin
}, 1000);
}

Well I'm Using this one which works very well for me:
function scrollIntoView (element, alignTop) {
var document = element.ownerDocument;
var origin = element, originRect = origin.getBoundingClientRect();
var hasScroll = false;
var documentScroll = this.getDocumentScrollElement(document);
while (element) {
if (element == document.body) {
element = documentScroll;
} else {
element = element.parentNode;
}
if (element) {
var hasScrollbar = (!element.clientHeight) ? false : element.scrollHeight > element.clientHeight;
if (!hasScrollbar) {
if (element == documentScroll) {
element = null;
}
continue;
}
var rects;
if (element == documentScroll) {
rects = {
left : 0,
top : 0
};
} else {
rects = element.getBoundingClientRect();
}
// check that elementRect is in rects
var deltaLeft = originRect.left - (rects.left + (parseInt(element.style.borderLeftWidth, 10) | 0));
var deltaRight = originRect.right
- (rects.left + element.clientWidth + (parseInt(element.style.borderLeftWidth, 10) | 0));
var deltaTop = originRect.top - (rects.top + (parseInt(element.style.borderTopWidth, 10) | 0));
var deltaBottom = originRect.bottom
- (rects.top + element.clientHeight + (parseInt(element.style.borderTopWidth, 10) | 0));
// adjust display depending on deltas
if (deltaLeft < 0) {
element.scrollLeft += deltaLeft;
} else if (deltaRight > 0) {
element.scrollLeft += deltaRight;
}
if (alignTop === true && !hasScroll) {
element.scrollTop += deltaTop;
} else if (alignTop === false && !hasScroll) {
element.scrollTop += deltaBottom;
} else {
if (deltaTop < 0) {
element.scrollTop += deltaTop;
} else if (deltaBottom > 0) {
element.scrollTop += deltaBottom;
}
}
if (element == documentScroll) {
element = null;
} else {
// readjust element position after scrolls, and check if vertical scroll has changed.
// this is required to perform only one alignment
var nextRect = origin.getBoundingClientRect();
if (nextRect.top != originRect.top) {
hasScroll = true;
}
originRect = nextRect;
}
}
}
}
I hope this helps.

If you do not mind venturing into jQuery, the scrollTo plugin is the best bet. It handles most needs and gives a very refined smooth trasition.
Hope it helps.

IE8 Jquery scrollTop always returns 0

I wrote a small plugin for jQuery for a simple parallax scrolling effect. It's working in all browsers except for < ie8.
$.fn.extend({
//plugin name - parallax ( simpel )
parallax: function(options) {
var defaults = {
speed: 3
};
var options = $.extend(defaults, options);
var o = options;
var obj = $(this);
var s = $(window).scrollTop() / o.speed;
if ($.browser.msie && parseInt($.browser.version, 10) <= 8) {
obj.css({"top" : -s + "px"});
}else{
obj.css("-webkit-transform", "translateY(-" + s + "px)");
obj.css("-moz-transform", "translateY(-" + s + "px)");
obj.css("-ms-transform", "translateY(-" + s + "px)");
}
}
});
In my main jQuery file i'm using the code like this:
$(window).scroll(function(){
$('.headMenu').parallax({speed: 6});
$('.header_img').parallax();
});
For some reason 's' Always stays 0. Can't find why. I think the $(window).scroll is not working in IE8.

I have had bad luck with scrollTop() in IE in the past, not sure why, though. If it fits your needs, try using window.scrollTo(0, 0); worked for me always, in all IEs :-)

jQuery - hover IE issue

I have a custom menu in jQuery that apparently doesn't work with IE 8 & 9. It's supposed to open multilevel menus with the hover() method, but it's only working o IE untill the first level from the root.
Code :
$('ul#leftmenu li').hover(function() {
if ($(this).hasClass('top'))
return false;
var p = $(this).parent().get(0);
var o = $(this).offset();
var t;
var l;
if (leftmenu_level >= 1)
{
t = 0;
l = 210;
}
else
{
leftmenu.top = o.top;
leftmenu.left = o.left;
t = o.top;
l = o.left + 210;
}
$(this).find('ul:first').css({
position : 'absolute',
top : t,
left : l
}).show();
$(this).find('a:first').css('color', '#5a3512');
leftmenu_level++;
return true;
}, function() {
if ($(this).hasClass('top'))
return false;
$(this).find('a:first').css('color', '#777777');
leftmenu_level--;
$(this).find('ul:first').hide();
return true;
}
);
Live example (left menu) :
http://lrp-workwear.com/
Any tips?

Try applying position:relative to your anchor tags, this seems to force the width & height of the anchor tags correctly and triggers a hover over the entire element and not just the text as it currently seems to be doing.
Hope this helps

How to check if a DIV is scrolled all the way to the bottom with jQuery

I have a div with overflow:scroll.
I want to know if it's currently scrolled all the way down. How, using JQuery?
This one doesn't work: How can I determine if a div is scrolled to the bottom?

Here is the correct solution (jsfiddle). A brief look at the code:
$(document).ready(function () {
$('div').on('scroll', chk_scroll);
});
function chk_scroll(e) {
var elem = $(e.currentTarget);
if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()) {
console.log("bottom");
}
}
See this for more info.

function isScrolledToBottom(el) {
var $el = $(el);
return el.scrollHeight - $el.scrollTop() - $el.outerHeight() < 1;
}
This is variation of #samccone's answer that incorporates #HenrikChristensen's comment regarding subpixel measurements.

Since it works without jQuery like that :
var isBottom = node.scrollTop + node.offsetHeight === node.scrollHeight;
I do :
var node = $('#mydiv')[0]; // gets the html element
if(node) {
var isBottom = node.scrollTop + node.offsetHeight === node.scrollHeight;
}

You can do that by
(scrollHeight - scrollTop()) == outerHeight()
Apply required jQuery syntax, of course...

Here is the code:
$("#div_Id").scroll(function (e) {
e.preventDefault();
var elem = $(this);
if (elem.scrollTop() > 0 &&
(elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight())) {
alert("At the bottom");
}
});

Since 2012 Firefox contains the scrollTopMax property. If scrollTop === scrollTopMax you're at the bottom of the element.

Without jquery, for onScroll event
var scrollDiv = event.srcElement.body
window.innerHeight + scrollDiv.scrollTop == scrollDiv.scrollHeight

For me $el.outerHeight() gives the wrong value (due to the border width), whereas $el.innerHeight() gives the correct one, so I use
function isAtBottom($el){
return ($el[0].scrollHeight - $el.scrollTop()) == $el.innerHeight();
}