We Keep Coding

Add class after scrolling also need to work on refresh

I have a working script which adds a class to the body after scrolling 80px.
This works but I need it to work too after having already scrolled and then refreshing the page.
So maybe replace the scroll part by position?
// fixed header
$(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 80) {
$("body").addClass('fixed');
} else {
$("body").removeClass("fixed");
}
});
});

$(window).scroll will only fire once a scroll event occurs. If you want to check for the scroll position when the page loads, you should do this outside of the $(window).scroll callback, like this:
function updateScroll() {
if ($(window).scrollTop() >= 80) {
$("body").addClass('fixed');
} else {
$("body").removeClass("fixed");
}
}
$(function() {
$(window).scroll(updateScroll);
updateScroll();
});

you're right. you need to check the event and the initial value:
window.addEventListener('load', function() {
var scroll = $(window).scrollTop();
if (scroll >= 80) {
$("body").addClass('fixed');
}
//no removing needed cause refresh did it
});

window.onscroll = function () { scrollFunction() };
function scrollFunction() {
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
document.querySelector(".fixed-top").classList.add("headerFix");
} else {
document.querySelector(".fixed-top").classList.remove("headerFix");
}
}

scroll function not working in IE

I have a jQuery scroll function set up, that when the user scroll beyond 94px the .fixed-header-wrap fades in and there's a class change etc too. This function isn't working on IE browsers though, and the .fixed-header-wrap is showing on document load and not fading out / in etc. My markup below:
//Header Colour Scroll Function
var scroller = true;
$(window).scroll(function () {
if ($(".sector-menu").css('display') == 'none') {
if ($(this).scrollTop() > 94 && scroller) {
$('.fixed-header-wrap').addClass('header-shadow');
$(".fixed-header-wrap").fadeIn('fast');
$('.header-logo').fadeIn('slow');
$('.header-wrap').addClass('header-blue');
scroller = false;
} else if ($(this).scrollTop() < 94 && !scroller) {
$(".fixed-header-wrap").removeClass('header-shadow');
$(".fixed-header-wrap").fadeOut('fast');
$('.header-logo').fadeOut('fast');
$('.header-wrap').removeClass('header-blue');
scroller = true;
}
} else {
if ($(this).scrollTop() > 94 && scroller) {
$('.fixed-header-wrap').addClass('header-shadow');
$(".fixed-header-wrap").fadeIn('fast');
$('.header-wrap').addClass('header-blue');
scroller = false;
} else if ($(this).scrollTop() < 94 && !scroller) {
$(".fixed-header-wrap").removeClass('header-shadow');
$(".fixed-header-wrap").fadeOut('fast');
scroller = true;
}
}
});
Is there any reason for this or changes that can be made to make the desired effect work across all browsers?

Try changing $(window).scroll() to $('html,body').scroll(). It worked for me in a previous project... Let me know if it works.

Smooth scrolling of document in either directions

I used the following function to scroll my document to specific point when user tries to scroll on the page. For this I used following code:
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$("html, body").animate({scrollTop: 700}, 500);
return false;
}
});
I want to know if there are event listeners for the mousewheel actions or not. When using this I can not actually scroll back up to the top of the document, because the scroll of mouse re-invokes the function and it pulls down the document again.
Also, if there is an alternative way, please let me know.
Can I do this using CSS only for cases where JS may be disabled by the user/client?

EDIT:
After your short explanation I (hopefully) understand what do you want.
I made a function with position states:
header, content, unresolved
and I reused your scrolling function with state condition.
(function() {
var pagePosition = "header";
$(window).scroll(function(){
if ($(this).scrollTop() > 0 && pagePosition == "header") {
pagePosition = "unresolved";
$("html, body").animate({scrollTop: 700}, 500, function() {
pagePosition = "content";
});
return false;
} else if ($(this).scrollTop() < 700 && pagePosition == "content") {
pagePosition = "unresolved";
$("html, body").animate({scrollTop: 0}, 500, function() {
pagePosition = "header";
});
return false;
}
});
})();

How can I launch a JavaScript or jQuery event when I reach the top of my page?

I have a simple problem, but I can't find the solution ...
I just want to launch an event (which execute a method) when I scroll my page up and I "touch" the top of it. I'm using JavaScript and jQuery in my page. Thanks in advance !

You should use the scroll event for that purpose:
$(window).scroll(function() {
if ($(this).scrollTop() == 0) {
//Do whatever you want to do
}
});
One thing you should notice is that this way when somebody scrolls to top continuously the even will be fired although you only want it once the top is hit, for this you can define the event handler as a function and put the last scrolltop value into a function local variable.
$(window).scroll(handleHitTop);
function handleHitTop(event) {
var currentScrollTopValue = $(this).scrollTop();
if (handleHitTop.lastTop === undefined) {
handleHitTop.lastTop = currentScrollTopValue ;
return;
}
if (handleHitTop.lastTop == 0 && currentScrollTopValue == 0) {
return;
}
handleHitTop.lastTop = currentScrollTopValue;
if (handleHitTop.lastTop == 0) {
//Call your event here
}
}

Use the onscroll event. Vanilla js example:
window.onscroll = function() {
if(document.body.scrollTop == 0) {
alert('yay!');
}
}
http://jsfiddle.net/kuWuf/

Use a .scroll() handler and .scrollTop():
$(window).scroll( function() {
if($(this).scrollTop() == 0) {
alert("Top!!!");
}
});
http://jsfiddle.net/jtbowden/wvJ9r/

jQuery to top function disallows scrolling

I'm creating magento shop and i want to make toTop button available after user scrolls the window.
I paste mine code bellow, it works fine, but after window is on top, i can't move it anymore, it's stuck.
jQuery(window).scroll(function() {
var top = jQuery(window).scrollTop();
if (top > 77) {
jQuery(function() {
jQuery('img.arrowup').fadeIn();
jQuery('div.header_bg').show();
jQuery('div.mainmenu').addClass('stick');
jQuery('body div.header-container').next().addClass('pad');
jQuery("img.arrowup").on('click', function(e) {
e.preventDefault();
jQuery('body,html').animate({scrollTop:10},800);
});
})} else {
jQuery('div.header_bg').hide();
jQuery('img.arrowup').fadeOut();
jQuery('body div.header-container').next().removeClass('pad');
jQuery('div.mainmenu').removeClass('stick');
}
});
============================
Thanks everybody for help, here's working solution with stick header and toTop animation :)
var scrollDiv=jQuery(this);
jQuery(window).scroll(function(){
if(jQuery(window).scrollTop()<="77"){
jQuery("img.arrowup").fadeOut("slow");
jQuery('div.header_bg').hide();
jQuery('div.mainmenu').removeClass('stick');
} else {
jQuery("img.arrowup").fadeIn("slow");
jQuery('div.header_bg').show();
jQuery('div.mainmenu').addClass('stick');
}
});
jQuery("img.arrowup").click(function(){
jQuery("html, body").animate({scrollTop:0},"slow");
});

I suggest to read this answer first for understanding why animations creates conflict depends on scroll value, than give it a try to this:
$(document).ready(function() {
$(window).scroll(function() {
var scrollVal = $(this).scrollTop(); // use this instead of window
if ( scrollVal >= 0 && scrollVal < 77 ) {
//do something without animations
$('div.header_bg').hide();
$('div.mainmenu').removeClass('stick');
} else if ( scrollVal === 77 ){
//i didn't try this before but it may work,
//since value equals 77 once, it may not create animation conflicts
$('img.arrowup').fadeIn();
} else if ( scrollVal > 77 ) {
//do something without animations
$('div.header_bg').show();
$('div.mainmenu').addClass('stick');
}
});
});