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;
}
Related
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>
I have the following code for hiding and showing a navigation bar on my Wordpress website:
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 800) {
$("#pn-navigation-bar").fadeIn();
} else {
$("#pn-navigation-bar").fadeOut();
}
});
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos < currentScrollPos) {
document.getElementById("pn-navigation-bar").style.opacity = 0;
document.getElementsByClassName("readingProgressbar")[0].style.display = "block";
} else if (prevScrollpos > currentScrollPos) {
document.getElementById("pn-navigation-bar").style.opacity = 1;
document.getElementsByClassName("readingProgressbar")[0].style.display = "none";
}
prevScrollpos = currentScrollPos;
};
And the following CSS to prevent it from loading the first time the page loads:
#pn-navigation-bar {
position: fixed;
top: 0;
width: 100%;
transition: all .3s ease-in-out;
display: none;
}
Ideally, this should be hiding the Navigation bar shown below while the user scrolls down and show it when a scroll up is detected.
However, as you can see if you visit the website here, this does not happen. This was working fine till a few days ago, but I don't know what has gone wrong. I've been optimizing my website for speed (JS/CSS minification) but I doubt that this gets affected. What can I do to fix this?
As suggested by users #mplungjan and #Howard E, Wordpress runs jQuery.noConflict. To prevent conflict with other JS librares, Wordpress will not recognize $ to be JQuery code and usually expects Jquery in place of the traditional $
To fix this, the easiest way is to map $ to JQuery.
According to this article, The code for this is:
(function($) {
//Insert Code Here
})( jQuery );
To correct the error, the code becomes:
<script>
(function($) {
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 800) {
$("#pn-navigation-bar").fadeIn();
} else {
$("#pn-navigation-bar").fadeOut();
}
});
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos < currentScrollPos) {
document.getElementById("pn-navigation-bar").style.opacity = 0;
document.getElementsByClassName("readingProgressbar")[0].style.display = "block";
} else if (prevScrollpos > currentScrollPos) {
document.getElementById("pn-navigation-bar").style.opacity = 1;
document.getElementsByClassName("readingProgressbar")[0].style.display = "none";
}
prevScrollpos = currentScrollPos;
};
})( jQuery );
</script>
I want to modify this code to make it work only on dekstop devices.
For my case, dekstop is anything above 640px.
Here is the original code:
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("shopify-section-header").style.top = "0";
} else {
document.getElementById("shopify-section-header").style.top = "-150px";
}
prevScrollpos = currentScrollPos;
}
var prevScrollpos = window.pageYOffset;
if (window.innerWidth > 640) {
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("shopify-section-header").style.top = "0";
} else {
document.getElementById("shopify-section-header").style.top = "-150px";
}
prevScrollpos = currentScrollPos;
}
}
From the MDN Docs (https://developer.mozilla.org/en-US/docs/Web/API/window/innerWidth):
The read-only Window property innerWidth returns the interior width of the window in pixels. This includes the width of the vertical scroll bar, if one is present.
More precisely, innerWidth returns the width of the window's layout viewport. The interior height of the window—the height of the layout viewport—can be obtained from the innerHeight property.
Alternatives:
If you can use jQuery: $(window).width()
document.documentElement.clientWidth matches the #media queries in css but only when there is no scrollbar
window.innerWidth exactly matches css #media queries.
For more about the differences, see How to get the browser viewport dimensions?
I have a JavaScript code that, when the page is being scrolled DOWN, the navigation bar should hide (or margin-top: -100px). But, when the page is being scrolled up, the navigation bar should appear (or margin-top: 0).
I don't understand why this function is not being called when the page is scrolled. Is there something wrong in my code? Please look below:
let prevScrollpos = window.pageYOffset;
window.onscroll = function() {
let currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.marginTop = "0";
} else {
document.getElementById("navbar").style.marginTop = "-100px";
}
prevScrollpos = currentScrollPos;
}
The main reason that I know that the function isn't being called, is that when I added some simple script to the function (such as alert("Hello World!"), that did not happen either.
Thank you, and any help is appreciated.
Do you have multiple window.onscroll declarations in your codebase? If so you're overwriting them each time.
let prevScrollpos = window.pageYOffset;
window.addEventListener('scroll', function() {
let currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.marginTop = "0";
} else {
document.getElementById("navbar").style.marginTop = "-100px";
}
prevScrollpos = currentScrollPos;
});
I'm working on a navbar that is always sticky on mobile and disappears when scrolling down but appears again when scrolling up on desktop.
Now it works perfectly well but I have one problem. On desktop, it becomes sticky when scrolling up right away. Even if I scroll just a little bit which can be annoying.
I want it to appear only when scrolling more than let's say 10px. So I'd need to add some threshold. I guess it could be done with JS but I'm a beginner.
Here's a fiddle with what I have now: https://jsfiddle.net/zsoltszilvai/zfqd901m/4/
I'd appreciate any help :)
var sticky = header.offsetTop;
var prevScrollpos = window.pageYOffset;
function myFunction(x) {
if (x.matches) {
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
}
} else {
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.top = "0";
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
}
} else {
document.getElementById("navbar").style.top = "-58px";
if (window.pageYOffset < sticky) {
header.classList.remove("sticky");
}
}
prevScrollpos = currentScrollPos;
}
}
}
You need to change prevScrollpos > currentScrollPos to prevScrollpos - currentScrollPos > 10, only tricky part is to not update prevScrollpos if the difference is smaller than the threshold.
var prevScrollpos = window.pageYOffset;
var SCROLL_UP_THRESHOLD = 200
function myFunction(x) {
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
console.log(prevScrollpos, currentScrollPos)
if (prevScrollpos > currentScrollPos) {
if (prevScrollpos - currentScrollPos < SCROLL_UP_THRESHOLD)
return console.log("not opening")
document.getElementById("navbar").style.top = "0";
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
}
prevScrollpos = currentScrollPos;
} else {
document.getElementById("navbar").style.top = "-58px";
if (window.pageYOffset < sticky) {
header.classList.remove("sticky");
}
prevScrollpos = currentScrollPos;
}
}
}