We Keep Coding

detect #div when part of it scrolled into viewport

I already have this which works great:
function isScrolledIntoView(elem) {
var docViewTop = jQuery(window).scrollTop();
var docViewBottom = docViewTop + jQuery(window).height();
var elemTop = jQuery(elem).offset().top;
var elemBottom = elemTop + jQuery(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
This detects when an ENTIRE #div is in the viewport. However, I cannot figure out how to alter this so that the code detects the #div when it is only PARTLY in the viewport. Can you help me? For you guys, this is probably super simple... Thanks! I have tried to enter pixel-values but I mess it up every time!

Just replace this:
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
with this:
return (docViewBottom >= elemTop && docViewTop <= elemBottom);
and isScrolledIntoView function will return true as soon as element is in the viewport.

This is possible without using jquery. We can get a bounding box that surrounds the element in question, and then check if the top or bottom of that box are between the top and bottom of our viewport!
// Assuming elem is an actual element, not a string selector
// You can use jquery or standard dom functions like querySelector to find the element if it's a selector
function isScrolledIntoView(elem) {
const box = elem.getBoundingClientRect();
const topInside = (box.top > 0 && box.top < window.innerHeight)
const bottomInside = (box.bottom > 0 && box.bottom < window.innerHeight)
return topInside || bottomInside
}

$(window).scrollTop() Counter

I have two functions. The first checks whether an element is within view as the page is scrolled. The second one is meant to calculate the scroll top and if the first function is true, that is when the element is in view, it sets the scrollTop of that element to 0.
My solution to get this done was to start a separate counter that is only activated when the element is in view, but I am having trouble making a working counter. As it is now, the value of i is stuck at 1. Below is my code, any input is appreciated.
var img = $('.banner_img_desktop').find('img');
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
var i = 0; // <-- my counter
if (isScrolledIntoView(img)) {
i = i + 1;
var elemScroll = i;
var imgPos = (elemScroll / 8) + 'px';
img.css('transform', 'translateY(' + imgPos + ')');
}
});

As per #GrafiCode Studios's advice! The scope of the variable i was local to the scroll function and I wanted to use it as global! The solution was to declare it outside the scroll function!

Invoke function only if above particular div

I have a div that becomes 'fixed' to the bottom of the window once it is scrolled out of view. I only want this behavior when the user is viewing the top half of the page. I do not want a fixed state being applied to the div when the user is on the bottom part of the page.
In short - The issue I have is that a fixed state is being applied when the div is out of view, regardless of page position.
Demo https://jsfiddle.net/DTcHh/19352/
$(window).scroll(function() {
if (isScrolledIntoView($('#myDivWrapper'))) {
if (!initSet) {
initSet = true;
}
$("#myDiv").removeClass('fixed');
} else if (initSet) {
$("#myDiv").addClass('fixed');
}
});
function isScrolledIntoView(elem) {
var $elem = $(elem);
var $window = $(window);
var docViewTop = $window.scrollTop();
var docViewBottom = docViewTop + $window.height();
var elemTop = $elem.offset().top;
var elemBottom = elemTop + $elem.height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

This method involves editing your markup and your isScrolledIntoView function.
Wrap the top half (or whatever viewable area you want invoked) of your markup in a div give it an id of #top.
Modify your scroll markup as this is currently checking that ALL of the element is in view, you only want a partial check.
Demo https://jsfiddle.net/DTcHh/19366/
$(window).scroll(function() {
if(isScrolledIntoView($('#myDivWrapper'))) {
if (!initSet) {
initSet = true;
}
$("#myDiv").removeClass('fixed');
} else if (initSet && isScrolledIntoView($('#top'))) {
$("#myDiv").addClass('fixed');
}
});
function isScrolledIntoView(elem) {
var $elem = $(elem);
var $window = $(window);
var docViewTop = $window.scrollTop();
var docViewBottom = docViewTop + $window.height();
var elemTop = $elem.offset().top;
var elemBottom = elemTop + $elem.height();
return ((elemTop <= docViewBottom) && (elemBottom >= docViewTop)) ;
}
I would suggest modifying the isScrolledIntoView function so it accepts a second parameter/ele. This way you'd only need to call it once.

This if block will execute only if you are on lower half of the page
if($(window).scrollTop() + $(window).height()/2 > $(document).height() / 2)
updated fiddle - https://jsfiddle.net/DTcHh/19370/

How to trigger an action when a certain div is viewed/scrolled to?

I have some divs, I need to trigger an action (float another div or fire an alert for example) when a certain div is viewed or scrolled to.. What is the best approach to do so?

What you mean by "viewed" I have no idea - but here is how you would do it when the user puts their mouse over the div:
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
$(window).scroll(function() {
if(isScrolledIntoView(myelement)) {
// in view
} else {
// not in view
}
});
Credit to Is there a way to detect when an HTML element is hidden from view?

You can probably use the Bullseye jQuery plugin which adds adds enterviewport and leaveviewport events to elements.

Making a fixed tooltip vanish by scrolling

I'm trying to create a messagebox that is fixed to the bottom of a webpage, so when a user scrolls, it stays put (simple css).
However, I'd like the messagebox to disappear when the user scrolls to a certain point in the webpage.
For example, if you have a signup form on the bottom of your site, I'd like to create a messagebox that reads "scroll down to signup", and when the user scrolled down to the top of the sign up form, the message would disappear, or get covered up by the form.
So when they scrolled up, the message would reappear.
This isn't my implementation, but an accurate illustration of the concept.
I haven't any experience developing with Javascript, but was hoping there was an existing method for this. I'm willing to learn though, this is something I'd like to use.
Any thoughts? Or concepts to start learning?
Thanks guys! (I think this could be a really clever method of highlighting certain content that perhaps users would miss if they didn't scroll through the entire page.)

This should do the trick (tested in IE7, Firefox, Chrome, Safari).
It uses jQuery and shows the element as soon as it is visible. This is the code:
$(document).ready(function() {
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
}
// the element to look for
var myelement = $('#formcontainer');
// the element to hide when the above is visible
var mymessage = $('#mymessage');
$(window).scroll(function() {
if(isScrolledIntoView(myelement)) {
mymessage.hide();
} else {
mymessage.show();
}
});
});
If you want the whole element to be visible before the message is hidden, replace the isScrolledIntoView above with this:
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)
&& (elemBottom <= docViewBottom) && (elemTop >= docViewTop) );
}
Credit for both of these functions go to this question.