We Keep Coding

Javascript scrolling for navigation bar not showing up when scrolling back up [django]

I am new to programming and having an issue with my navigation bar. I have a fully functional nav bar and when I scroll down it hides as expected but does not pop back up when I scroll back up. This is the function I used for the scrolling:
var scrolled;
var lastscroll = 0;
var delta = 5;
var navHeight = $('header').outerHeight();
$(window).scroll(function(event){
scrolled = true;
});
setInterval(function() {
if (scrolled) {
hasScrolled();
scrolled = false;
}
}, 250);
function hasScrolled() {
var scrolltop = $(this).scrollTop();
if(Math.abs(lastscroll - scrolltop) <= delta)
return;
if (scrolltop > lastscroll && scrolltop > navHeight){
$('header').removeClass('nav-down').addClass('nav-up');
} else {
if(scrolltop + $(window).height() < $(document).height()) {
$('header').removeClass('nav-up').addClass('nav-down');
}
}
lastScrollTop = scrolltop;
}
Does anyone know what I am missing?

Do something when offset of div is smaler than fixed value

I want to fade the opacity of menu if it's offset to top of the window is smaler than 700px.
But I don't understand why this code doesn't work.
$(window).scroll(function() {
var offset = $(".navigation-top").offset();
var posY = offset.top - $(window).scrollTop();
if ($(posY) < 700) {
$('.navigation-top').animate({'opacity':'0.1'},500);
} else {
$('.navigation-top').animate({'opacity':'1'},500);
}
});

Thnaks to Carsten and Jeremy,
I ended up with this. But the .stop() is mantadory. Otherwise it works only with a extreme delay because of the mess of data from scrolling.
$(window).scroll(function() {
var offset = $(".navigation-top").offset();
var posY = offset.top - $(window).scrollTop();
if (posY < 700) {
$('.navigation-top').stop().animate({'opacity':'0.1'},500);
} else {
$('.navigation-top').stop().animate({'opacity':'1'},500);
}
});

Event scroll up and fixed header jquery

I have a function
$(document).ready(function () {
var lastScroll = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if ((lastScroll - st) == 5) {
$("header").css("position", "fixed");
}
else {
$("header").css("position", "absolute");
}
lastScroll = st;
});
});
But I want, when I scroll up on 5px, header again shows.
How I can follow event scroll up 5px?

You're updating your lastScroll too often, to make sure it has scrolled past a certain delta (in your case 5px) you should include that clause before checking if the user has scroll up or down.
This tutorial may help you, but I also created a fiddle with an updated version of your code.
But it would go like this:
$(document).ready(function () {
var lastScroll = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
// Make sure they scroll more than delta
if(Math.abs(lastScroll - st) <= 5)
return;
if (st < lastScroll) {
$("header").css("position", "fixed");
} else {
$("header").css("position", "absolute");
}
lastScroll = st;
});
});

bottom menu hiding/showing on scroll up and down

I have the following code which hides my menu when scrolls down, shows when scrolls up.
js
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('nav').outerHeight();
$(window).scroll(function(event) {
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
if (Math.abs(lastScrollTop - st) <= delta)
return;
if (st > lastScrollTop && st > navbarHeight ) {
// Scroll Down
$('nav').removeClass('nav-down').addClass('nav-up');
} else {
// Scroll Up
if (st + $(window).height() < $(document).height()) {
$('nav').removeClass('nav-up').addClass('nav-down');
}
}
lastScrollTop = st;
}
I would like it to hide and reveal in the same way but both scrolling up and down (it hides when you scroll either up or down then comes back down)

Stop a function when I click on a div

I am trying to stop a function when I click on a div "ego". The function displays or hides the header depending on the position of the scroll and should only work by default.
Here's my code:
$("#ego").click(function(e){
var $this = $(this);
if($this.data('clicked', false)){
hasScrolled();
}
e.stopPropagation();
});
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();
$(window).scroll(function(event){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight){
// Scroll Down
$('header').animate({top:"-178px"}, 200, 'easeOutCubic');
} else {
// Scroll Up
if(st + $(window).height() < $(document).height()) {
$('header').animate({top:"0px"}, 200, 'easeOutCubic');
}
}
lastScrollTop = st;
}
Here's the fiddle:
https://jsfiddle.net/antoniobarcos/wL2vuv4h/2/
Any idea?

so if i get you right you want to stop hiding the navigation bar on top when you click a certain div:
you can achieve this by adding a class on click on the button to your #ego like stopNavigation. further you have to adjust your if clause where you set the top position of the header:
$("#ego").click(function(e){
var $this = $(this);
$this.toggleClass('stopNavigation');
});
and
if (st > lastScrollTop && st > navbarHeight && !$('#ego').hasClass('stopNavigation')){
// Scroll Down
$('header').animate({top:"-178px"}, 200);
}
i updated your fiddle for further information! i hope this is what you want to achieve: https://jsfiddle.net/wL2vuv4h/3/