Develop Reference

hide navbar on scroll down past x pixels and show on scroll up

I want to hide my navbar when scrolls down and show when scrolls up, but scrolls down occurs after the windows has been scrolled x amount of pixels down the page.( in the code after #section1 ) and if scrolls up shows the navbar immediately.I am using this code but I don't know how could I define a position.
var scrollp=0;
(function ($) {
$(document).ready(function(){
$(function () {
$(window).scroll(function () {
// ask about the position of scroll
if ($(this).scrollTop() < scrollp) {
$('.navbar').fadeIn();
scrollp= $(this).scrollTop();
} else {
$('.navbar').fadeOut();
scrollp= $(this).scrollTop();
}
});
});
});
}(jQuery));

Just check the scrollTop in the else clause, like this:
... else {
scrollp = $(this).scrollTop();
if (scrollp > fadeOutAfter) // Set fadeOutAfter to wherever you want the navbar to fade out
$('.navbar').fadeOut();
}

Changing element styles following scrolling from the top

I'm trying to apply a different style to the header whenever you scroll down from the top. Basically I want it so that if you are scrolled at the top then apply style 1, but if you are not scrolled at the top then apply style 2.
I have tried using a while and for loop to achieve this but both failed. The jQuery example below did work but for some reason not on this example. However I would rather use JavaScript than jQuery since I am learning JavaScript.
Can someone advise me what should I use for this: a while or if statement? And can someone tell me what I have done wrong with my attempts?
Thanks for any help.
// ATTEMPT 1
var headerWrap = document.getElementById('header-wrap');
var h = headerWrap.scrollTop;
function changeHeaderOpacity() {
"use strict"; // wtf is this?
while (h > 0) {
headerWrap.addClass('scroll-opacity-change');
}
headerWrap.removeClass('scroll-opacity-change');
}
// ATTEMPT 2
/*
var headerWrap = $('#header-wrap');
$(window).scroll(function() {
headerWrap.addClass('scroll-opacity-change');
if($(this).scrollTop() <= 0) {
headerWrap.removeClass('scroll-opacity-change');
}
});
*/
/*
// ATTEMPT 3
var headerWrap = document.getElementById('header-wrap');
var h = headerWrap.scrollTop;
function changeHeaderOpacity() {
"use strict"; // wtf is this?
if (h > 0) {
headerWrap.addClass('scroll-opacity-change');
} else {
headerWrap.removeClass('scroll-opacity-change');
}
}
*/
body{
height:1000px;
}
#header-wrap{
height:100px;
width:100%;
background:#0f0;
}
.scroll-opacity-change{
background:#f00;
}
<div id="header-wrap">
</div>

Well first of all, you need to add listener to detect window scroll.
$(document).ready(function() {
$(window).scroll(function() {
//do the header styling using .style
});
});
Now you need to store the scroll log in few variables to figure out you are scrolling down or not, you can the following using this:
var currentScroll = window.pageYOffset || document.documentElement.scrollTop;
if (currentScroll > lastScrollTop){
// You are down scrolling
} else {
// You are up scrolling
}
previousScroll = currentScroll;
Final code:
$(document).ready(function() {
previousScroll=0 //this means we are starting from top
$(window).scroll(function() {
var currentScroll = window.pageYOffset || document.documentElement.scrollTop;
if (currentScroll > previousScroll){
// Change header style cause you are down scrolling
} else {
// Do something else? You are up scrolling anyway...
}
previousScroll = currentScroll;
);
});
I hope this helps, your comments are welcomed.

Use class instead of id;
<div class="header-wrap">
</div>
and
$(window).scroll(function() {
$('.header-wrap').addClass('scroll-opacity-change');
if($(this).scrollTop() <= 0) {
$('.header-wrap').removeClass('scroll-opacity-change');
}
});

How to bind function to window width?

How can I bind this function to the window width?
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > 0) {
jQuery('.navbar-header').slideUp("slow");
} else {
jQuery('.navbar-header').slideDown("slow");
}
});

From your add explain, you can change responsive change your render based on the width of window.So, the only way to do this, is to change the handler.
jQuery(window).scroll(function() {
if (jQuery(document).width() < = 992) {
if (jQuery(this).scrollTop() > 0)
{
jQuery('.navbar-header').slideUp("slow");
}
else
{
jQuery('.navbar-header').slideDown("slow");
}
}
});
By this way, If you change the browser width, will change the show of scroll.

Animate some divs only once

I am trying to animate some divs after the user scrolls to a specific position on the page. the problem is that i want it to happen only once. I used Boolean flags but it doesn't seem to like it.
What are u all suggest me to do?
::the code Its not even running
FYI I don't want to use PHP
var once = false;
$(document).ready(function() {
if ($(window).scrollTop() > 760 && once == false) {
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000 * i).fadeIn(1000);
});
once = true;
}
)};
Thanks!

From your question
after the user scrolls to a specific position on the page
Listen to scroll event
$(document).ready(function() {
var once = false;
$(document).on('scroll', function(){
if ($(window).scrollTop() > 760 && once==false){
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000*i).fadeIn(1000);
});
once=true;
}
});
)};
Alternative from comments. Check if element has a class (or attribute) or not. Below code checks if the element has the data-noanimate attribute. If yes it will not animate, if not it will animate and add data-noanimate so that it will animate once.
$(document).ready(function() {
$(document).on('scroll', function(){
if ($(window).scrollTop() > 760){
$('.hash').each(function(i) {
if($(this).attr('data-noanimate') === undefined){
$(this).attr('data-noanimate','true').fadeOut(0).delay(1000*i).fadeIn(1000);
}
});
}
});
)};

var once=false;
$(document).ready(function() {
if ($(window).scrollTop() > 760 &&once==false)
{
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000*i).fadeIn(1000);});
once=true;
}
});
Your brackets on the end of the ready function were flipped.

The other answer is correct, but it can be better like this:
$(function() {
$(window).on('scroll', function(){
if ($(window).scrollTop() > 760) {
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000 * i).fadeIn(1000);
});
// without boolean value,you can off `scroll` event
$(window).off('scroll');
}
})
});

Detect div scroll bar hit the top

how to detect when div scroll bar, scroll up and hit the top(only when it hit the top)
I have found another post, but this one is hit the bottom.
what i need is hit the top. anyone know how to change this?
$("#divID").scroll(function(){
if($(this)[0].scrollHeight - $(this).scrollTop() <= $(this).outerHeight())
{
alert(1);
}
});
Know when vertical scrollbar hits bottom of scroll in div

working fiddle
var el = $('.test');
el.on('scroll', function(){
if(el.scrollTop() == 0){alert("i just hit the top")}
});

scrollTop will be 0 when the scroll bar is that the top. Try this:
$("#divID").scroll(function () {
if ($(this).scrollTop() == 0) {
alert(1);
}
});
Example fiddle

$("#divID").scroll(function(){
if($(this)[0].scrollHeight - $(this).scrollTop() <= $(this).outerHeight())
{
alert("Bottom");
}
if($(this).scrollTop() == 0)
{
alert("Top");
}
});
Fiddle is here