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?

Jquery mobile sticky header

I have a jquery mobile header div (data-role="header" data-position="fixed") with two toolbars inside in a layout like this:
_____________________
|XXXXXXXXXXXXXXXXXXX|
|YYYYYYYYYYYYYYYYYYY|
and I want to reproduce the effect of WhatsApp, where scroll down hides toolbar XXXXXXXX and scroll up shows toolbar XXXXXXXXXX. Toolbar YYYYYY always visible.
By using window.onscroll this can be achieved by adding/removing a class with top:-50px; upon scroll down/scroll up.
It works, however, it works only when the page is loaded for the first time or it is reached with a link having rel=external. In all other cases, it is impossible to see the effect of the added class. I have also tried .addClass("sticky").enhanceWithin() with no effect.
Any suggestion to make this to work every time?
Here the code:
var didScroll = false;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = 20;
$(document).on("scroll", function(event){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var currentScroll = $(this).scrollTop();
if(currentScroll >= 200) {
$("#scrollToTop").show();
} else {
$("#scrollToTop").hide();
}
if(Math.abs(lastScrollTop - currentScroll) <= delta)
return;
if (currentScroll > lastScrollTop && currentScroll > navbarHeight){
$('#PageHeader').removeClass('nav-down').addClass('sticky');
} else {
if(currentScroll + $(window).height() < $(document).height()) {
$('#PageHeader').removeClass('sticky').addClass('nav-down');
}
}
lastScrollTop = currentScroll;
}

I hope my fiddle will help you out:
[http://jsfiddle.net/Lfve19u0/]
Ramon.

trigger only once on scroll

I use the following code doing an action on scroll up or down.
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
// downscroll code
} else {
// upscroll code
console.log("up");
}
lastScrollTop = st;
});
However, I only want to trigger it once.
Any idea of why the following version do not works?
Thanks !
var lastScrollTop = 0;
$(window).one('scroll',function(){
var st = $(this).scrollTop();
if (st > lastScrollTop){
// downscroll code
} else {
// upscroll code
console.log("up");
}
lastScrollTop = st;
});

If you want to check wether your handler has been called or not - you should define a flag(hasCalled in this case):
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if(st <= lastScrollTop) {
console.log("up");
$(window).off('scroll');
}
lastScrollTop = st;
});

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;
});
});

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/