We Keep Coding

add a class on scroll position

I've got a div that I want to remain relative on page until the scroll position reaches the top of the div, then a fixed float is applied via adding a class.
I've got code that I would think should be working; however, cannot get it to do anything. When scrolling, the div remains relative and won't apply the class to fix the object.
$(function() {
var a = function() {
var b = $(window).scrollTop();
var c = $("#header");
var d = c.offset();
if(b > d){ alert(d); c.addClass("header-fixed"); }
else { c.removeClass("header-fixed"); }
};
});
This is the CSS
.header-fixed { position: fixed; top: 0; left: 0; right: 0; }
#header {
z-index: 1000;
float: left;
width: 100%;
z-index: 9999998;
}
I've got a div above the header that can fluctuate in height so I wanted to calculate the distance from the top of header to the top of the page dynamically. Whenever the scroll position reaches the position of the top of the div, I want to add class of header-fixed. If the scroll position goes less than the position, I want to removeClass header-fixed to show the div above the header again.
HTML:
<div id="header_container">
<div id="header" class="background-white border-bottom-navy-dark box-shadow-navy-dark">
<div id="header_1" >
<a href="index" class="no-decoration"><img class="logo" src="images/12345.png" alt=""/>
<div class="display-none-mobile">
<h1 class="title1 color-gold">HEADER 1</h1>
<h2 class="subtitle color-navy-dark">SUB HEADER</h2>
</div>
</div></a> <?php /*---- header left ----*/ ?>
<div id="header_2">
shopping_cart
person
menu
</div> <?php /*---- header right ----*/ ?>
</div> <?php /*---- header ----*/ ?>
</div> <?php /*---- header site container ----*/ ?>
</div> <?php /*---- header container ----*/ ?>

There are few issues here like c.offset() returns an object. You need to actually use c.offset().top instead and you need to add this logic to jquery .scroll() event because right now the check only happens on page load. You need to check for this logic every time window is scrolled.
Working Demo:
$(function() {
var c = $("#header");
var d = c.offset().top - 20;
$(window).scroll(function() {
var b = $(window).scrollTop();
c.toggleClass("header-fixed", b > d);
});
});
.header-fixed{position:fixed;top:0;left:0;right:0}
#header{float:left;width:100%;z-index:9999998}
#announcement{height:500px;border:1px solid #ccc!important;padding:2em;border-radius:10px}
#announcement,#header_container{margin-bottom:15px}
ul{list-style-type:none;margin:0;padding:0;overflow:hidden;border:1px solid #e7e7e7;background-color:#f3f3f3}
li{float:left}
li a{display:block;color:#666;text-align:center;padding:14px 16px;text-decoration:none}
li a.active{color:#fff;background-color:#4CAF50}
.box-shadow-navy-dark { box-shadow: 0 3px 6px #071c38 !important; z-index: 9999999999 !important; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="announcement">
Announcement div - Scroll down below
</div>
<div id="header_container">
<div id="header" class="background-white border-bottom-navy-dark box-shadow-navy-dark">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</div>
<div id="announcement">
Announcement div - Scroll up again
</div>

Header scroll issue

This is a wordpress site wherein i have an issue with header when i scroll down, you can see in the first image the header is transparent, then once i scroll down there is a glicth where the header is blinking while scrolling down with the background, actually the background should appear only when we scroll up,
please check the link, and try scrolling the page fast and you will see the blink in the header :
Code : `
<script type="text/javascript">
var mywindow = $(window);
var mypos = mywindow.scrollTop();
var up = false;
var newscroll;
mywindow.scroll(function () {
newscroll = mywindow.scrollTop();
if (newscroll > mypos && !up) {
$('.header2').stop().slideToggle();
up = !up;
console.log(up);
} else if(newscroll < mypos && up) {
$('.header2').stop().slideToggle();
up = !up;
}
mypos = newscroll;
});
</script>
<script type="text/javascript">
jQuery(window).scroll(function() {
var scroll = jQuery(window).scrollTop();
if (scroll > 300) {
jQuery(".header2").addClass("dark");
} else {
jQuery(".header2").removeClass("dark");
}
});
</script>
.dark {
background: #323232;
position: fixed!important;
border-bottom: none!important;
margin: 0px;
}
.site-logo {
float: left!important;
padding: 20px!important;
margin-top: 0px!important;
z-index: 999!important;
position: relative!important;
width: 200px!important;
}
<div id="contain">
<div class="fixed-header">
<div class="header2">
<?php if(true === get_theme_mod('show_topbar')){ ?>
<div class="fulltop">
<div class="wrap"><div class="pm-left"><?php echo ( get_theme_mod( 'topbar_text' ) ); ?></div><div class="pm-right social"><?php my_social_media_icons(); ?></div></div>
</div>
<?php }?>
<div class="wrap">
<?php if ( get_theme_mod( 'themeslug_logo' ) ) : ?>
.........
</div>
</div>
`
please help

How to see if a div's bottom is 100 px from bottom?

I am using sticky class to stick a div. The problem is that it sticks correctly from top but at the bottom, it overlaps the footer.
This is my HTML
<div class="tab-content">
<div role="tabpanel" class="tab-pane active " id="menu1">
<div class="col-sm-12"><div class="clear"> </div></div>
<!-- LEFT NAV START -->
<div class="col-sm-3" id="sticky-anchor2">
<div class="sticky2">
<span style="color:red"><strong>Menu Group</strong></span>
<ul aria-labelledby="dropdownMenu1">
<?php foreach ($categories as $key => $value) { ?>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="<?php echo $nav_url; ?>#cat_<?php echo str_replace(' ', '_', trim($key)); ?>" class="anchorLink" style="color:#FFF !important;">
<button class="btn btn-danger btn-sm btn-block setlbl" type="button"><?php echo $key; ?></button></a>
</li>
<?php } ?>
</ul>
</div>
This is my jquery code.
var window_top = $(window).scrollTop();
var div_top2 = $('#sticky-anchor2').offset().top - 100;
if (window_top > div_top2) {
$('.sticky2').addClass('sticky stick');
} else {
$('.sticky2').removeClass('sticky stick');
}
What I want is that if the div is, let's say 150 px from bottom, it should remove the stick class. What should I do?

Try this:
It' working, try my fiddle: https://jsfiddle.net/v3kq1ddd/
or run the snippet in full screen and resize the window and you will see the border change from red to blue.
$(document).ready(function() {
$(window).resize(function() {
var eHeight = $(".sticky2").height();
var eTop = $(".sticky2").offset().top;
var tot = eHeight + eTop;
var heightDifference = $(window).height() - tot;
$('.height').text(heightDifference);
if(heightDifference < 150) {
$('.sticky2').addClass('blue');
} else {
$('.sticky2').removeClass('blue');
}
});
});
.sticky2 {
height: 200px;
width: 200px;
border: 1px solid red;
}
.blue {
height: 200px;
width: 200px;
border: 1px solid blue !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<lable>Space to buttom</lable>
<div class="height"></div>
<div class="sticky2">detta är en div</div>

I am taking document height and window height, if have some particular
Div please take the height of that.
You have to calculate scroll Amount at each and every scroll, so
'Scroll' event will be used which will fire at every scroll. Other
thing to remember if 'sticky stick', is not two different class use
hyphen between them.
$(window).scroll(function(){
var scrollamount=$(window).scrollTop();
var totalheight=($(document).height() - ($(window).height()));
if(scrollamount > totalheight-100)
{
$('.sticky2').addClass('sticky_stick');
}
else
$('.sticky2').removeClass('sticky_stick');
});
JsFiddle: https://jsfiddle.net/2jo69opo/

image overlay for php generated items

So I have a roll over effect for my mock store, the images and info for each boxes are taking from .sql file and auto generated sections. I want it too cover each section. I could hard code it, but that's a little too draconian.
<div id="scoll" class="group">
<div class="container">
<div class="center_items">
<?php
//external pages area
include_once('config\database.php');
include_once('object/chair.php');
$database = new Database();
$conn = $database->getConnection();
$chair = new Chair($conn);
$stmt = $chair->readAll();
while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
?>
<div class="product_box" >
<img src="img/<?php echo $row['THUMB']; ?>" alt="chair_image"> </a>
<h4> <?php echo $row['chair_name'];?> </h4>
<p>$<?php echo $row['PRICE'];?></p>
<div class="buy-box-shadow group">
Buy me!
</div>
</div>
<?php
}
?>
</div>
</div>
</div>
JS
onload=init;
function init() {
document.getElementsByClassName("product_box")[0].onmouseover = function(e){
e.preventDefault();
mouseOver();
}
document.getElementsByClassName("product_box")[0].onmouseout = function(e){
e.preventDefault();
mouseOut();
}
function mouseOver() {
document.getElementsByClassName("buy-box-shadow")[0].style.opacity = .9;
}
function mouseOut() {
document.getElementsByClassName("buy-box-shadow")[0].style.opacity = 0;
}
See the code is hard coded to be the first element, a tad confused on how to make it go for every element.

You don't need JavaScript for that, you can do it just with CSS.
.product_box .buy-box-shadow {
opacity: 0.9;
display: none;
}
.product_box:hover .buy-box-shadow {
display: block;
}

Should be able to do this with forEach. Like so:
function init() {
var product_boxes = document.getElementsByClassName("product_box");
product_boxes.forEach(function(currentValue, index, array){
currentValue.onmouseover = function(e){
e.preventDefault();
mouseOver();
}
});

unable to dynamically set height of div

I want to dynamically resize one of my divs to take the height of the viewport using the following javascript
<script>
var applyMapContainerHeight = function() {
var wH = window.screen.height;
wH = parseInt(wH) + 'px';
$("#main-container-col2-rt-layout").css('height',wH);
console.log(wH);
};
$(document).ready(function() {
applyMapContainerHeight();
});
</script>
My div is coded as:
<div class="wrapper">
<?php echo $this->getChildHtml('global_notices') ?>
<div class="page">
<?php echo $this->getChildHtml('header') ?>
<div id="main-container-col2-rt-layout" class="main-container col2- right-layout">
<div class="main">
<?php echo $this->getChildHtml('breadcrumbs') ?>
...........
This is a magento page for my e-commerce site. Please help!

Aside from vm and vh <length> datatypes, I see that your code works!
<style>
body {
margin: 0; padding: 0;
}
.main-container {
background: red;
}
</style>
<body>
<div class="wrapper">
<?php echo $this->getChildHtml('global_notices') ?>
<div class="page">
<?php echo $this->getChildHtml('header') ?>
<div id="main-container-col2-rt-layout" class="main-container col2- right-layout">
<div class="main">
<?php echo $this->getChildHtml('breadcrumbs') ?>
</div>
</div>
</div>
</div>
<script>
var applyMapContainerHeight = function() {
var wH = window.screen.height;
wH = parseInt(wH) + 'px';
document.getElementById("main-container-col2-rt-layout").style.height = wH;
console.log(wH);
};
(function() {
applyMapContainerHeight();
})();
</script>
</body>
Your question was somehow unclear about what the problem really was, but if the problem is you want wrapper and page not to have a white background, then the solution is to apply dynamic width to the highest div element (i mean the grandpa i.e. wrapper).

Css has units specifically for this:
vh and vw
Demo: http://jsfiddle.net/jfbrdomb/show
div.red {
height: 100vh;
width: 100vw;
background-color: red;
}