We Keep Coding

Changing opacity for a div on scroll after being fixed

I have a page containing divs of various heights (all same width). What I have done with them so far is set them to stick when the bottom of the div is reached when scrolling so that the next div appears to be scrolling up as the previous div remains fixed.
What I'm trying to do now is have it so that the previous div gradually fades while the page is being scrolled so that by the time the next div is scrolled to the top of the page, the previous div has completely disappeared. Likewise, I would like to have it so that when you scroll back up, the previous div gradually fades back in.
I have tried many solutions online which work for the first div on the page but all the other ones after it don't fade in or out correctly (or don't fade at all).
Here's what I have so far:
let windowHeight = $(window).height();
let sections = $(".page-section");
$(window).on("scroll", function () {
sections.each(function () {
var bounds = this.getBoundingClientRect();
$(this).css({
opacity: ($(this).height() - $(window).scrollTop()) / $(this).height()
})
if (bounds.bottom <= windowHeight) {
$(this).css({
position: "sticky",
top: bounds.top
})
}
})
})
Example: https://jsfiddle.net/8Lux70bp/1/
As stated before this works for the first div but all the other ones after it have issues. I'm thinking it's due to their offset but I can't figure out how to incorporate that when scrolling.
Thanks

Keep fixed the div only while scrolling and depends on the parent div height

I want to fixed the left and right div while only scrolling. It only fixed while scrolling and depends upon the parent div. I want to do some like this.
On that website, category div on left side, is fixed while scrolling and it fixed only within the parent div. Not exceed on the div.
Here my sample plunkr. I want to do same thing in my website too fixed the both left and right div.
Is it possible to done by angularjs instead of jquery?
can anyone help for me?

Im not sure if it can be done using angularjs as i've not really looked into it but it can easily be done using
var fixmeTop = $('.fixme').offset().top; // get initial position of the element
$(window).scroll(function() { // assign scroll event listener
var currentScroll = $(window).scrollTop(); // get current position
if (currentScroll >= fixmeTop) { // apply position: fixed if you
$('.fixme').css({ // scroll to that element or below it
position: 'fixed',
top: '0',
left: '0'
});
} else { // apply position: static
$('.fixme').css({ // if you scroll above it
position: 'static'
});
}
});

Making a div scroll with the page after a certain distance

I have a web page set up with 225px of header space and then the body begins. I have a floating div that I want to follow with the body as the page gets scrolled down. The div follows but I dont want it to start until the user has scrolled past the header. Here is a picture example:
Once the user has scrolled past all the red (225px), then the blue div should being scrolling with the page.
The current problem is that the div begins moving the second the user scrolls through the header and ends up 225px below the top of the page.
I believe something like this is what I need, but it doesn't seem to do anything (at least in chrome)
if($(window).scrollTop() > 255)
{
//begin to scroll
$("#floating_list").css("position","fixed");
$("#floating_list").css("top",0);
}
else
{
//lock it back into place
$("#floating_list").css("position","relative");
}
Thanks!

You haven't set any event listener. Include JQuery and here's the working code:
$(document).on("scroll", function(){
// or as a shorthand $(document).scroll(function(){
if($(document).scrollTop() > 255)
{
//begin to scroll
$("#floating_list").css("position","fixed");
$("#floating_list").css("top",0);
}
else
{
//lock it back into place
$("#floating_list").css("position","relative");
}
});

Show and hide a Div on scroll up and down

I'm trying to make my simple "scroll back to the top" image appear and disappear based on how far away from the top of the page you are. For the sake of example, let's say 100 pixels away from the top.
Here's what I have. It seems to work on scroll down, the image div fades in.
When I scroll back to the top, the div doesn't fadeOut. Any tips?
$(window).scroll(function() {
if ($(this).scrollTop()>100)
{
$('#toTop').fadeIn();
}
else
{
$('.#toTop').fadeOut();
}
});

I think you've a typo in your code: $('.#toTop').fadeOut(); should be $('#toTop').fadeOut();
Update
Just a simple improvement. To prevent the element be faded all the time you scroll, check if it was already faded earlier:
var $toTop = $('#toTop');
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$toTop.fadeIn();
} else if ($toTop.is(':visible')) {
$toTop.fadeOut();
}
});

How do I get scrollable div to not add height to containing divs when screen resolution height is too small to fit the scrolling div?

I'm using javascript to move a div down the page as you scroll. I found the code online and it works for what I needed. The problem I'm running into is for lower screen resolutions (ipad) where you have to scroll down to see the footer past the main content area, the scrolling div pushes down to get onto the screen, changing the height of the divs and body, which makes you be able to endlessly scroll down the page. The div scrolls by adding a margin to the top of the div being moved as you scroll. I've tried setting heights on all the containing divs and body but nothing seems to be working css-wise, and I don't know enough about javascript to set some sort of condition.
The page I'm working on is http://gwa-inc.com/pages.aspx?pid=31&name=Americana
If you make your browser window height smaller and scroll down the page, you'll see what I'm talking about. Is there an easy fix to this that I'm missing?
Script being used is:
var $sidebar = $(".subMenuWrap"),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 30;
$window.scroll(function () {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});

You should absolutely position the box that needs to scroll, so that it will be pulled out of the flow of the page. Then you can more closely control where that box goes and can keep it from pushing the footer down further.