I have a navbar in a web page I am working on. I added some jquery code to display the navbar when the user scrolls down. The problem with this is there are a few pages where the entire height of the page is so small that the user will not be able to scroll down. In this scenario, the navbar is never displayed as there is no possibility of scrolling.
How do I change my code so that, if there is no possibility of scrolling then the navbar is displayed by default?
Here is my jquery code to the display the navbar when the user scrolls
<script type="text/javascript">
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
document.getElementById("navbar").style.top = "0";
} else {
document.getElementById("navbar").style.top = "-100px";
}
}
</script>
I think that the best way to go about this would be to compare the document height with the window height to know if the document is within the browser's window height. So I would write something like this:
<script type="text/javascript">
var body = document.body,
html = document.documentElement;
var documentHeight = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
if (documentHeight <= window.innerHeight) {
document.getElementById("navbar").style.top = "0";
} else {
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
document.getElementById("navbar").style.top = "0";
} else {
document.getElementById("navbar").style.top = "-100px";
}
}
}
</script>
The document height calculation is a little bit messy in vanilla JS, you could probably put that inside a function to make it cleaner if you want.
Related
Im a graphic designer with a little knowledge of code... but this is driving me nuts...
I got a classic navigation bar thats hidden unless user scrolls a little bit down. I got this action with javascript. OK.
But I want this happens (the action of showing navigation bar) only on the middle of every page. Like 100px away from top and 100px away from bottom of the scroll. The reason is I got breadcrumbs on top and footer on bottom of the page, I dont need the navbar there.
I tried my best to mix what I got (the navbar) with some scroll detectors, or reading bars that get scroll position... but was impossible to get something work...
¿any help please?
My code is this right now, only the navbar (improvements welcome too...heheh):
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.bottom = "0";
} else {
document.getElementById("navbar").style.bottom = "-100px";
}
prevScrollpos = currentScrollPos;
}
If I understood you correctly, I believe you want something like this:
window.onscroll = () => {
const scrollPos = window.scrollY;
const offset = 100; const targetEl = document.body; //Adjust to preference
if(scrollPos > offset && (targetEl.scrollHeight - window.innerHeight - scrollY) > offset )
console.log('shownavbar')
else
console.log('hidenavbar')
}
Got it thanks to #NourAshraf. I did some changes with the code I got before and yours. Now works perfect!
Just if anyone need it finally is something like this. To check it easier I put to change the body colour to green (when the navigation bar should show) and red (when should not appear).
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
var offset = 500; const targetEl = document.body; //Adjust to preference
if (prevScrollpos > currentScrollPos && currentScrollPos > offset && (targetEl.scrollHeight - window.innerHeight - scrollY) > offset) {
document.body.style.backgroundColor = "green";
} else {
document.body.style.backgroundColor = "red";
}
prevScrollpos = currentScrollPos;
}
So I am currently trying to learn how to make a responsive MENU using HTML, CSS, JAVA. I want to shrink my menu when it is scrolled down within the max and specific width that i want to, but seems like my java code cant compare the current width of my web and the specific width that i want to compare. If the width is 830 bellow, I want the height of my menu to be 120 when when scrolled up and 60 when scrolled down.
And if the width is 830 higher, I want the height of my menu to be 400px when scrolled down and 60px when up. So here is my code for java.
window.onscroll = function() {scrollFunction()};
var x, y;/*error here*/
x = document.getElementsByTagName('body').style.width(value);/*error here*/
y = 830;/*error here*/
function scrollFunction() {
If ( x <= y)/*error here*/
{
if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80)
{
document.getElementById("menu").style.height = "60px";
}
else
{
document.getElementById("menu").style.height = "400px";
}
}
else
{
if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80)
{
document.getElementById("menu").style.height = "60px";
}
else
{
document.getElementById("menu").style.height = "120px";
}
}
}
I'm trying to run a scroll function on desktop. I perform calculations to position a block on the page according to the user's screen size.
I'm looking in all directions, I do not see how to do that when I resize the size of the screen the function is restarted.
methods: {
handleScroll: function() {
let hW = $(window).height();
let WW = $(window).width();
let position = $(window).scrollTop();
$(window).scroll(function() {
let scroll = $(window).scrollTop();
if (
scroll > position
&& WW >= 768
){
// thing...
console.log('down');
} else if(
scroll < position
&& WW >= 768
// thing...
){
// thing...
console.log('up')
}
position = scroll;
});
}
},
mounted () {
this.handleScroll();
}
I have a problem with this code.
This code is checking the resolution of mobile device and open a web page with same resolution. But When I open a page from the mobile device with display width less than 480px and I scroll, the page is not viewed correctly. I want to drop this code for devices with display width less than 480px.
Can you help me?
JavaScript
function init() {
window.addEventListener('scroll', function(e){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 200,
header = document.querySelector("nav");
if (distanceY > shrinkOn) {
header.setAttribute("id","smaller");
} else {
header.removeAttribute("id","smaller");
}
});
}
I dont want: 480px width id smaller to be added.
If I understand you correctly, you want this line of code: header.setAttribute("id","smaller");
to be only executed if the width is greater then 480px. If this is the case, try the following:
var width = document.body.clientWidth;
function init() {
window.addEventListener('scroll', function(e){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 200,
header = document.querySelector("nav");
if (distanceY > shrinkOn) {
if (width > 480) {
header.setAttribute("id","smaller");
}
} else {
header.removeAttribute("id","smaller");
}
});
}
I would like to animate a div when user scrolls the page.
For that, i implemented this code:
var slide = jQuery(".apresentacao-spc-01");
var opening = false;
var closing = false;
var pos = jQuery(window).scrollTop();
jQuery(window).scroll(function() {
var pos = jQuery(window).scrollTop();
console.log(pos);
if (pos > 100) {
if (!opening) {
opening = true; closing = false;
slide.stop().animate({
'opacity': 1,
'margin-left': '0px'
}, 700, function() {
opening = false;
});
}
} else {
if (!closing) {
closing = true; opening = false;
slide.stop().animate({
'opacity': 0,
'margin-left': '-1000px'
}, 500, function() {
closing = false;
});
}
}
});
The issue is:
Using "if (pos > 100) {", if the user resolution is big enough to show the element before he needs to scroll, he won't see the element unless he begins to scroll the page.
My question is:
How can I get a scroll animation that will be executed when the element is visible?
I mean: If the element is visible on page load, the animation automatically starts... If the element is not visible on page load, the animation waits the scroll reach the element to start...
Thanks.
There a few different things you could do. My first thought was to query the height of the viewport with something like this:
var viewportWidth = document.documentElement.clientWidth
, viewportHeight = document.documentElement.clientHeight
And then trigger the animation if it is taller than the distance the element is down.
A more dynamic solution would be to use a function that checks to see if the element is in viewport the automatically, that way you wouldn't need to worry about adjusting the height if you changed stuff on your page:
function isElementInViewport (el) {
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
);
}
credit to this response.
There is a use guide and further information in the link provided.
Good luck!