We Keep Coding

jQuery: Add / Remove style while scrolling past div's

I have this page (https://www.datacoral.com/architecture/) that has a left sidebar with five bullet points. What I want to happen is as the user scrolls past these five div's on the right hand column, the text in one of these bullet points adds a class called 'bolder' and the text become a font-weight of 700 to let the user know what point they are in on the page. As the pass by that same div, the class disappears and ends up in the next bullet point since you're now passing by another div.
I've got it partially working but it's not hitting the right point of the div at all. Seems to add the class as you are passing the bottom of the div instead of the top.
This is the code I'm currently working with. Anyone know what I might be doing wrong so this can function properly?
Note: Should mention I'm basically duplicating this code five times and just swapping out the numbers.
jQuery(function(){
jQuery(window).scroll(function() {
var scroll = jQuery(window).scrollTop(); // how many pixels you've scrolled
var os = jQuery('#guide_body-0').offset().top; // pixels to the top of div1
var ht = jQuery('#guide_body-0').height(); // height of guide_body-0 in pixels
if(scroll > os + ht){
jQuery('.scroll-nav-0').addClass('bolder');
}
});
});

I think firing a function on scroll like that gets a little bit crazy. I always delay the function until the scrolling has stopped.
As far as the catch point, i think your code is applying the classes when the element has moved out of view. i would use the bottom of the browser screen as a reference point.
Think about it like this:
$(window).scrollTop() returns 0 at the top of the page.
$('#guide_body-0').offset().top returns 1000px.
So $(window).scrollTop() is equal to $('#guide_body-0').offset().top when that element is at the top of the screen.
Add $('#guide_body-0').height() to the equation and that puts the scroll position (the top of the screen) at the bottom of the element.
What you need to do is check if the offset.top property of the element is in a scroll position which puts it above the bottom of the screen.
UPDATE
The code here is for a custom solution. But if you are looking for a way to just add simple animations to elements as they scroll into view, check out wow.js and animate.css
https://wowjs.uk/
https://animate.style/
// Init variable for timer
let timer;
// Get target element
const el = $("#4");
// Get viewport height
const screen = window.innerHeight;
// Fire callback on window scroll
$(window).scroll(function() {
// Clear timeout just in case
clearTimeout(timer);
// Check if the element already has the class
if (!el.hasClass("active")) {
// Set a delay timer then run the function
timer = setTimeout(check_el_pos, 300);
}
});
function check_el_pos() {
// Clear the timer
clearTimeout(timer);
// Get current scroll position
let scroll_pos = $(window).scrollTop();
// This is the math here. Add scroll position to screen height and you get the bottom of the screen. When that value equals the top offset of the element, we are there.
if (scroll_pos + screen > el.offset().top) {
console.log(scroll_pos + screen);
console.log(el.offset().top);
// Add the classes to the element. Boom, we're done.
el.removeClass("active").addClass("active");
}
}
body,
html {
padding: 0;
margin: 0;
}
.example-grid {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
display: grid;
grid-gap: 40px;
}
.example-grid>li {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
height: 65vh;
background: slategray;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: #fff;
font-size: 2em;
line-height: 1em;
transition: background-color 1s;
transition-timing-function: ease-out;
}
.example-grid>li:nth-child(even) {
background: coral;
}
.example-grid>li.active {
background: aquamarine;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="example-grid">
<li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>
<li id="4">4</li>
<li id="5">5</li>
<li id="6">6</li>
<li id="7">7</li>
</ul>

How do I keep a position:fixed element next to the center element

I am new to CSS/HTML/Javascript. I sort of just tweak and see what works and what doesn't, so I don't really get how to make my element that is in a fixed position to stay relative to the center page. The reason, is that when I zoom out, it stays in the right of the page, which I understand as I have read that fixed position do not have a parent.
So how can I keep it fixed to the position it was in previously.
window.onscroll = function() {
Navmove()
};
var box = document.getElementById("Navfixed");
var stock = box.offsetTop;
var box1 = document.getElementById("Navfixed1");
var stock1 = box1.offsetTop;
function Navmove() {
if (window.pageYOffset > stock) {
box.classList.add("Sticky");
box1.classList.add("Sticky1");
} else {
box.classList.remove("Sticky");
box1.classList.remove("Sticky1");
}
}
.Navnormal a:link {
color: #296da0;
}
.Navhover a:hover {
color: #4386bc;
background: #bcbcbc;
}
.Navbox {
margin: auto;
width: 13em;
height: 26.5em;
color: #b53206;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
background: rgba(255, 255, 255, 0.7);
border-color: #b53206;
padding: 1em;
border-radius: 0px 15px 15px 0px;
}
.Navbox2 {
margin-top: -225em;
margin-left: 102em;
}
.Container1 {
top: 0;
bottom: 0;
}
<div class="Container1">
<div class="Navbox2">
<div id="Navfixed" class="Navbar Navnormal Navhover Navbox">
<span class="Subheader"><strong><u>Directory</u></strong></span>
<p>
<span class="Borderfix1">
Home</span>
About Us
Research
Data Repository
Media
Other tools
<span class="Borderfix2">
Contact Us</span>
</div>
</div>
```
<div id = "Navfixed1" class = "Navigate Imagehover">
<ul style = "list-style-type: none;">
<div class = "Donate">
<li><img src = "Discord.png"></img></li>
<li><img src = "patreon.png"></img></li>
<li><img src = "Paypal.jpg"></img></li>
</div>
<div class = "Donate2 Donate3">
<li><img src = "f_logo_RGB-Blue_58.png"></img></li>
</div>
</ul>
</div>
```
Essentially this is a scroll for my navbar, however, it works perfectly when at 100% zoom level, but once it gets past the Yoffset it starts sticking to the right because of the fixed position. How can I fix this? Thank you.

First of all, you say that your element is position fixed but I do not see any position: fixed; on your CSS.
For what I understand from your explanation, you should do something like the next:
.Navbox2 {
position: fixed;
top: 50%;
margin-top: -14.25em; /* Negative half of height of the element. */
}
This will position your element fixed relative to the web browser window, sticked to the top-left corner, It does not depend on any parent becase what it is looking for to be positioned is, as I said before, the web browser window.
About the top:50%; and margin-top: -14.25em; is used to position a fixed element in the middle of the screen.
The top:50%; is standard and the margin-top has to be the negative half of the height of the element. Because I see that your element has height: 26.5em; and padding:1em this means that the real height is 28.5em, you have to sum one em of the padding from the top, and other em from the bottom.
So now you can see your element fixed and in the middle of the screen.
Example on fiddle:https://jsfiddle.net/Samuel10F/msha7zot/23/
I understand that you want something like this but I am not 100% sure with your explanation, if there is something else just tell me :)

Change font color on scroll based on a div

I am currently coding a simple MENU button that is fixed in the top right of the screen.
With the text it is normally Black, but I want to be able to change the text to White when it is within a certain Div on a page so it is still visible on the dark background images.
I had set up two .CSS classes and tried to get them to switch on scroll but I cannot figure it out.
Anyone know how I can achieve this result?
HTML
<div class="NavigationButton menu_white">
MENU
</div>
CSS
.NavigationButton {
position: fixed;
top: 5%;
right: 5%;
z-index: 99999;
font-family: neuzeit-grotesk, sans-serif;
font-weight: 700;
color: inherit;
}
.menu_white {
color: #fff;
}
.menu_black {
color: #000;
}
(Not My Site) Example site: http://flavinsky.com/home/amaio
Just without the snap scroll
Thanks

You can use jQuery to get the scroll position and toggle the classes based on where the dark background element is. Here is an example
$(document).ready(function(){
$(window).scroll(function(){
var light_pos = $('#white_div').offset().top;
var light_height = $('#white_div').height();
var menu_pos = $('.NavigationButton').offset().top;
var scroll = $(window).scrollTop();
if(menu_pos > light_pos && menu_pos < (light_pos + light_height)) {
$('.NavigationButton').addClass('menu_black');
$('.NavigationButton').removeClass('menu_white');
}
else {
$('.NavigationButton').removeClass('menu_black');
$('.NavigationButton').addClass('menu_white');
}
})
})
and here is a working fiddle https://jsfiddle.net/atqkuwhs/

A possible solution is to get the offset of the div and the menu from the top of the page and apply your wanted changes once they intersect.

In-page anchors not working properly in combination with "scroll-then-fix" JS navbar code

I use this nice little JavaScript to make my navigation bar (which is normally sitting 230px down from the top) stick to the top of the page once the page is scrolled down that 230 px. It then gives the "nav" element a "fixed" position.
$(document).ready(function() {
$(window).bind('scroll', function() {
if ($(window).scrollTop() > 230) {
$('nav').addClass('fixed');
} else {
$('nav').removeClass('fixed');
}
});
});
nav {
width: 90%;
display: flex;
justify-content: center;
max-width: 1400px;
height: 85px;
background-color: rgba(249, 241, 228, 1);
margin: auto;
border-top-left-radius: 0em;
border-top-right-radius: 0em;
border-bottom-left-radius: 2em;
border-bottom-right-radius: 2em;
}
.fixed {
position: fixed;
border-top: 0;
top: 0;
margin: auto;
left: 0;
right: 0;
z-index: 4;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</nav>
Now, the problem: i have positioned the corresponding anchor targets
within the page and have given them some "padding-top" to account for the fixed navbar (about 90px), so that they don't disappear behind the bar when the page jumps to them after clicking.
.anchor {
padding-top: 90px;
}
<a class="anchor" id="three">
This works fine AS LONG AS the navbar is already fixed to the top.
But if you click on a link while the navbar is still in its original mid-page position (e.g. the first click the user will do), it just disregards the offset i gave the anchor target and jumps to a weird position where the anchor target is hidden behind the navbar (and not even aligned with the top of the page)!
If i THEN click on the link again (now in the fixed bar on top of the page), it corrects itself and displays the page as i want to. But that first click always misses - i can't figure out why! Please help
EDIT: WORKING DEMO here: http://www.myway.de/husow/problem/problem.html

1st Add a new class name spacebody to your first div with class="space"
<nav>
...
</nav>
<div class="space spacebody">
</div>
2nd JS use the following should fix your problem:
$(document).ready(function() {
$(window).bind('scroll', function() {
if ($(window).scrollTop() > 230) {
$('nav').addClass('fixed');
$('.spacebody').css('margin-top', '85px');
} else {
$('nav').removeClass('fixed');
$('.spacebody').css('margin-top', '0px');
}
});
});
Reason Why?
because when your nav is not fixed, it has a height of 85px, when you scroll down it has no height which is 0 height. Then everything below move up by 85px causing your to go below the target of ONE or TWO etc. It is not you are missing the first click, it is when the nav are not fixed and the click you will be scroll more down by 85px. If you scroll to top and click you will miss again.
You can easily see this if you change your CSS for nav with background-color: transparent;
With the code above should fix it when you nav become fixed to add a margin-top as 85px to the div below so they keep the same height as you clicked.

Float a div at the bottom right corner, but not inside footer

I'm trying to implement a "go to top" button that floats at the bottom right corner of a page. I can do this with the following code, but I don't want this button to enter the footer of my page. How can I stop it from entering the footer and stay at the top of it when user scrolls the page down to the bottom of the page?
CSS
#to-top {
position: fixed;
bottom: 10px;
right: 10px;
width: 100px;
padding: 5px;
border: 1px solid #ccc;
background: #f7f7f7;
color: #333;
text-align: center;
cursor: pointer;
display: none;
}
JavaScript
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
$('#to-top').fadeIn();
} else {
$('#to-top').fadeOut();
}
});
$('#to-top').click(function() {
$('body,html').animate({scrollTop:0},"fast");
});
HTML
<div id="to-top">Back to Top</div>
EDIT
Here is a drawing of how it should look like. The black vertical rectangle is a scroll bar. The "back to top" button should never enter the footer region.
Here is a jsfiddle.

The solution turned out to be more complicated than I thought. Here is my solution.
It uses this function to check if footer is visible on the screen. If it is, it positions the button with position: absolute within a div. Otherwise, it uses position: fixed.
function isVisible(elment) {
var vpH = $(window).height(), // Viewport Height
st = $(window).scrollTop(), // Scroll Top
y = $(elment).offset().top;
return y <= (vpH + st);
}
$(window).scroll(function() {
if($(this).scrollTop() == 0) {
$('#to-top').fadeOut();
} else if (isVisible($('footer'))) {
$('#to-top').css('position','absolute');
} else {
$('#to-top').css('position','fixed');
$('#to-top').fadeIn();
}
});
jsfiddle

Increase the value of bottom: 10px; than the height of footer.
I saw your screenshot now,just add some padding-bottom to it.

Solution
$(document).ready(function(){
$(window).scroll(function(){
btnBottom = $(".btt").offset().top + $(".btt").outerHeight();
ftrTop = $(".footer").offset().top;
if (btnBottom > ftrTop)
$(".btt").css("bottom", btnBottom - ftrTop + $(".btt").outerHeight());
});
});
Fiddle: http://jsfiddle.net/praveenscience/BhvMg/
You forgot to give the z-index, that prevents it from being on top!
z-index: 999;
Or if it is overlapping with the footer of your page, you can increase the co-ordinates.
bottom: 50px;
Your question is still not clear, "stop it from entering the footer". Does it overlap?