Develop Reference

jQuery "unstick" box when scrolling before a certain threshold

I have a box that needs to stick, and I am using position: fixed CSS for that when it reaches the bottom of the page while scrolling, and then unstick while scrolling back up past that threshold. Below is my jQuery code:
$(window).scroll(function() {
var wHeight = $(window).height();
var stickyTop = $('.threshold').offset().top;
var xxx = stickyTop - wHeight;
var windowTop = $(window).scrollTop();
if ( windowTop > xxx ) {
console.log(windowTop)
$('.box').addClass("sticky")
} else {
$('.box').removeClass("sticky")
}
});
I don't understand why my else state doesn't work. And it's weird that the console.log kicks in late.
Here's a complete pen: https://codepen.io/frontend2020/pen/vYjJBma?editors=1010
Thanks for helping!

This kind of sticking effect can be easily done with CSS. If you want something similar like this YouTube video which was captured on this site, you just need two nested divs (i.e.div>div).
The parent div must has larger height (let's say 1000px) and child div can be anything less than the parent div (let's say 200px). Then you just need to apply position: sticky; to child div.
That will do the trick.

Get Lowest Point of Scroll on Page

Is it possible via Javascript to store how far a user has scrolled while on page (pixel-wise), regardless of where they are at any time?
For example, I'd like to track how far someone scrolled before going back up to do a specific action at the top of the page.
Thanks!

Simply save the scroll position if it's the lowest one, every time a scroll happens.
var maxScroll = 0;
$(window).scroll(function () {
var scroll = $(document).scrollTop();
if (scroll > maxScroll) maxScroll = scroll;
});
// maxScroll is at any time the lowest point of vertical scrolling on the page.
You might want to debounce the handler for better performance.

'Endless scroll' in a div on a web page

I want to create a div containing endless scrollable content in a page.
For recognizing the end of the scrollable content in order to load more data from the data base I've written the following:
$(window).scroll(function(){
var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();
var scrolltrigger = 0.95;
if ((wintop/(docheight-winheight)) > scrolltrigger) {
lastAddedLiveFunc();
}
});
Question: The following code is for creating the endless scroll which fits in the entire webpage, but how can I write the same for a 'div' inside a web page?
(Hint: An exact similar thing is the Ticker on Facebook, on the right side which shows the recent activities of your friends in real time.)

The principle is the exact same. The div will be your browser viewport, and the div content is your document. You just need to exchange
$(window).scroll() --> $("#someDiv").scroll()
$(window).scrollTop() --> $("#someDiv").scrollTop()
$(document).height() --> $("#someDiv")[0].scrollHeight
$(window).height() --> $("#someDiv").height()
and it should work.
Note that:
scrollHeight is a property, not a function.
scrollHeight isn't jQuery, so you need to obtain it from the actual javascript element of the selector, hence the [0] addition. Another way is to use $("#someDiv").prop("scrollHeight").

$("#yourdiv").scroll(function(){
//your logic
}
You can use your div instead of window
For example
$('#yourdiv').scrollTop() // etc

use this
// get box div position
var box = document.getElementById('box').offsetTop;
window.onscroll = function(){
// get current scroll position
var scroll_top = document.body.scrollTop || document.documentElement.scrollTop;
document.getElementById('scbox').innerText = scroll_top + ' ' + box;
// if current scroll position >= box div position then box position fixed
if(scroll_top >= box)
document.getElementById('box').style.position = 'fixed';
else
document.getElementById('box').style.position = 'relative';
}

Javascript scroll and stop when in view

I have this code:
function Scroll(aid){
var aTag = $(\"a[name='\"+ aid +\"']\");
$('html,body').animate({scrollTop: aTag.offset().top},'slow');
}
But the problem is, that it scrolls down to the tag, so it is in the top of the window. I did like to have it, so it only scrolls to the element so it is in the bottom of the window.
So you can see what is on top of the element (like all the other content above it).
Any ideas?

Find out how high the viewport is, and substract that:
var pos = Math.max(aTag.offset().top - $(window).height(), 0);
$('html,body').animate({scrollTop: pos },'slow');
You might need to add a small offset.

Keeping sidebar in viewport, problem with scrolling

I've got a solution for keeping a sidebar in the viewport as you scroll up and down the page. Problem comes in when the sidebar is longer than the content area, and you keep scrolling you get this jittering effect as the sidebar keeps pushing the footer down.
I've got an example of this setup in jsFiddle: http://jsfiddle.net/U9F7w/2/ (full screen: http://jsfiddle.net/U9F7w/2/embedded/result/ )
My question is, is there a way to make the sidebar stop once it touches the bottom/footer area?
I've read some solutions about setting the sidebar to absolute, unfortunately it's an existing site and changing the position didn't work and messed with a lot of the existing page elements.
Here's the jQuery/js I'm working with:
// set the offset
var sidebarOffset = $(".sidebar").offset();
var sidebarPadding = 15;
// when the window scrolls, keep sidebar in view
$(window).scroll(function() {
if ($(window).scrollTop() > sidebarOffset.top) {
$(".sidebar").stop().animate({marginTop: $(window).scrollTop() - sidebarOffset.top + sidebarPadding });
}
else {
$(".sidebar").stop().animate({marginTop: 0});
};
});
edit
One thing I thought about was (not sure if this is possible) to detect if the bottom of one div was lower than the bottom of another, stop the scrolling. Is there a way to detect if the bottom of one div is lower than the other?

Check if the sidebar's height is greater then that of the content:
var ct = $(".content");
var sb = $(".sidebar");
var sbOffsetTop = sb.offset().top;
var sbPadding = 15;
$(window).scroll(function() {
if (sb.height() < ct.height()) {
if ($(window).scrollTop() > sbOffsetTop) {
sb.stop().animate({top: $(window).scrollTop() - sbOffsetTop + sbPadding });
}
else {
sb.stop().animate({top: 0});
};
};
});
See demo fiddle with large content and demo fiddle with large sidebar.
And I don't know why exactly, I would use top in conjunction with position: relative, but marginTop works also fine.