We Keep Coding

Header reappear on scroll up not working on mobile

My company wanted our website header to disappear on scroll down but reappear on scroll up, which I was able to do with JS and CSS - it works fine on Desktop but doesn't work on mobile. I am using Wordpress and Beaver Builder (I have escalated to Beaver Builder in case something might be blocking it?)
JAVASCRIPT:
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("header-global").style.top = "0";
} else {
document.getElementById("header-global").style.top = "-100px";
}
prevScrollpos = currentScrollPos;
}
And the following CSS:
#header-global {
position:fixed;
Width: 100%;
transition: 0.3s;
z-index: 20;
}
The function works perfectly fine on desktop but I not on mobile. I have the Beaver Builder header plugin, which I have confirmed sticky header is not activated. Is there anything else blocking it for mobile / am I doing something wrong? Note that my JS knowledge is limited..
Your help would be appreciated.

Needed to decrease the px as shown below
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("header-global").style.top = "0";
} else {
document.getElementById("header-global").style.top = "-200px";
}
prevScrollpos = currentScrollPos;
}

How do you hide/show a sticky footer menu through div tags instead of pixels using JS

First, let me clarify that I am extremely new to this, so I apologize for using the wrong terminology.
I'm looking to recreate Morning Brew's sticky footer opt-in form (click here for reference), but the code I'm currently using only tracks pixels. Is there a way I can make it, so it looks for div tags instead?
<script>
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos < 4200 && prevScrollpos > 200) {
document.getElementsByClassName("_form")[0].style.display = "block";
} else {
document.getElementsByClassName("_form")[0].style.display = "none";
}
prevScrollpos = currentScrollPos;
}
</script>

You can use window and get scroll event by this way:
let element = document.getElementById('footer');
window.addEventListener('scroll', function(e){
let Y = window.scrollY;
console.log(Y);
Y > 600 ? element.style.display = 'block' : element.style.display = 'none';
})
body{
height: 1600px;
}
<div id="footer">Element to fix</div>

How to stop scroll when dynamic div ends

I want to stop scroll after a dynamic div reaches its end. This div will be holding dynamic content so the size never stays the same. I know how to lock in position when scroll hits a pre-defined height, but not sure how to do it when the hight is constantly changing. here's what i'm using for my standard locking scroll when it hits specific point:
var profile_rc = $("#profile-rc");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 285) {
profile_rc.addClass("p-right-column");
} else {
profile_rc.removeClass("p-right-column");
}
});

Looks like you are using jQuery, the following 2 examples might help.
Detecting dynamic height of screen
<script>
$(function(){
var windowHeight = $(window).height();
$(window).resize(function() {
windowHeight = $(window).height();
console.log(windowHeight);
});
});
<script>
Detecting dynamic height of a div
<script>
$(function(){
var divHeight = $('#your-div-id').css("height");
$( window ).on("resize", function() {
divHeight = $('#your-div-id').css("height");
console.log(divHeight);
});
});
</script>

I got it to work doing this:
$(window).scroll(function() {
var divHeight = $('#farleft-cont').outerheight(true);
var ycbc = $('#target-div');
var scroll = $(window).scrollTop();
if (scroll >= divHeight) {
ycbc.addClass("target-div-fixed");
} else {
ycbc.removeClass("target-div-fixed");
}
});

Fixed div on scroll down & Set absolute when scroll up

sir I want to lock my menu with div id menu fixed in top of window when scroll down the window, and also I want to set position as absolute when it scroll up I tried with this code. its doing the first job correctly. i can set the menu fixed at top of page. but it can't set the page absolute position when scroll up here is my code
<script type="application/javascript">
$(window).bind('scroll', function () {
if (window.scrollY=100){
document.getElementById("menu").style.position = "fixed";
document.getElementById("menu").style.top = "0px";
}
else if(window.scrollY < 100){
document.getElementById("menu").style.position = "absolute";
document.getElementById("menu").style.top = "100px";
}
});
</script>

You were assigning value instead of comparing window.scrollY=100
The code should be:
$(window).bind('scroll', function () {
if (window.scrollY>=100){
// ^^-----------use >= here
document.getElementById("menu").style.position = "fixed";
document.getElementById("menu").style.top = "0px";
}
else if(window.scrollY < 100){
document.getElementById("menu").style.position = "absolute";
document.getElementById("menu").style.top = "100px";
}
});

Detect vertical scroll and scrollbar width and apply width change to body

In my page, I wish to detect whether the page has vertical scrollbars, and if so, need to detect the width of the scrollbar, so I can reduce my body by the width and thus prevent my sidebar from changing location from viewing a non-scrolling page to a scrolling page.
I have the following jQuery/Javascript code:
$(document).ready(function () {
var parent, child, width;
if (width === undefined) {
parent = $('<div style="width:50px;height:50px;overflow:auto"><div/></div>').appendTo('body');
child = parent.children();
width = child.innerWidth() - child.height(99).innerWidth();
parent.remove();
}
if ($("body").height() > $(window).height()) {
//change width of body here
}
});
Unfortunately, this code doesn't work for me. Can someone please let me know where I'm going wrong?

(function($) {
$.fn.ScrollBarWidth = function() {
if (this.get(0).scrollHeight > this.height()) { //check if element has scrollbar
var inner = document.createElement('p');
inner.style.width = "100%";
inner.style.height = "200px";
var outer = document.createElement('div');
outer.style.position = "absolute";
outer.style.top = "0px";
outer.style.left = "0px";
outer.style.visibility = "hidden";
outer.style.width = "200px";
outer.style.height = "150px";
outer.style.overflow = "hidden";
outer.appendChild(inner);
document.body.appendChild(outer);
var w1 = inner.offsetWidth;
outer.style.overflow = 'scroll';
var w2 = inner.offsetWidth;
if (w1 == w2) w2 = outer.clientWidth;
document.body.removeChild(outer);
return (w1 - w2);
}
}
})(jQuery);
Runs like so :
var scrollbarWidth = $('body').ScrollBarWidth();
console.log(scrollbarWidth);​ //prints the scrollbar width to the console
FIDDLE

You shouldn't need to change the width of the body. By default, it's 100% of the window's width and will adjust when scrollbars appear.
However, if you can't for some reason set the width to 100%, first see if disabling the horizontal scrollbar helps you:
overflow-x: hidden;
If that doesn't cut it, use the function from here to get the scrollbar's width. Then, listen to the window resize event:
var $window = $(window),
$body = $('body');
function resize() {
if ($body.height() > $window.height()) {
$body.width($body.width() - getScrollBarWidth());
}
}
$(window).resize(resize);​