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

Change top value of fixed element depending on scroll

I like to create an effect where my navigation bar hides when scrolling down, but appears when scrolling up, no matter how far you scrolled down.
I've managed to get as far as this jsfiddle, but I'm lost from there.
The navigation div has position: fixed with top: 0. I decrease the top for every number of pixels scrolled down. But at the moment, I'm not having the insight to increase top for every number of pixels scrolled UP, no matter how far down you scrolled.
I hope it's clear enough what I try to achieve.
jQuery
var topScroll = 0;
$(document).scroll(function () {
var scrolled = $(this).scrollTop();
if (scrolled > $('nav').height()) {
$('nav').css('top', ($('nav').height() - scrolled));
}
if (topScroll > scrolled) {
//scrolling up
} else {
//scrolling down
}
topScroll = scrolled;
});
-
Edit
I think I need a way of saving the scrollTop() value when the scroll direction is changed and then add the difference between that number and the new scrollTop() to the top value of my navbar. I just don't know how to do that.

Is this what you want ?
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
$('nav').css('display', 'none');
} else {
$('nav').css('display', 'block');
}
lastScrollTop = st;
});

Similar to luidgi27's code but with a smooth animation :)
-> altered Fiddle
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
$('nav').animate({height: "0px"}, 100);
} else {
$('nav').animate({height: "50px"}, 100);
}
lastScrollTop = st;
});
Edit
Im not sure what you want. Changed the Code a bit so it has steps while showing the Nav.
-> new altered Fiddle
var lastScrollTop = 0;
var height = 50;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop && height > 0){
$('nav').animate({height: "-=25px"}, 30);
height = height - 25;
} else if(st < lastScrollTop && height < 50){
$('nav').animate({height: "+=25px"}, 30);
height = height + 25;
}
lastScrollTop = st;
});
Edit2
-> new altered Fiddle 2
Here you go with the third and most accurate hiding effect.
var lastScrollTop = 0;
var diffrence = 0;
var height = 50;
var isGrowing = false;
var isShrinking = false;
$(window).scroll(function(event){
var st = $(this).scrollTop();
diffrence = st - lastScrollTop;
$('#debug').html(diffrence + "<br />" + height + "<br />" + $('nav').height());
if (diffrence > 0 && height < 50 && !isGrowing){
if((diffrence + height) > 50){
height = 50;
isGrowing = true;
$('nav').stop().animate({height: "50px"}, 100, function(){
isGrowing = false;
});
}else{
height = height + diffrence;
$('nav').animate({height: "+="+diffrence+"px"}, 0);
}
} else if(diffrence < 0 && $('nav').height() > 0 && !isShrinking){
if((diffrence + height) < 0){
height = 0;
isShrinking = true;
$('nav').stop().animate({height: "0px"}, 100, function(){
isShrinking = false;
});
}else{
height = height + diffrence;
diffrence = diffrence*-1;
$('nav').animate({height: "-="+diffrence+"px"}, 0)
}
}
lastScrollTop = st;
});

How detect actual position before start change screen orientation?

I'm trying to detect the actual position of my page scrool before start the change orientation.
It will determine what position of my "new" screen (in the new orientation) will be show.
I tried to check, every scroll event, the actual position, as you can see below:
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
if (scrollTop >= window.secao1 && scrollTop <= window.secao1){
window.secaoIDSet = "s1";
}
if (scrollTop >= window.secao2 && scrollTop <= window.secao2){
window.secaoIDSet = "s2";
}
if (scrollTop >= window.secao3 && scrollTop <= window.secao3){
window.secaoIDSet = "s3";
}
if (scrollTop >= window.secao4 && scrollTop <= window.secao4){
window.secaoIDSet = "s4";
}
if (scrollTop >= window.secao5-2){
window.secaoIDSet = "s5";
}
});
And then I would like to set the position to be show in the new orientation, but I don't know when do this action:
$(window).scrollTop($('#' + window.secaoIDSet).offset().top + 'px');

First create even handler
$(window).on("mousewheel", function() {
alert($(document).scrollTop());
}
Then just call
$(window).mousewheel();
Hope it will help.