Detect when document is not at top - javascript

I want to apply a class once the document isn't at top anymore, i.e. when the user scrolls down. Could someone explain why this isn't working:
if ($(window).scrollTop() != 0) {
// Do stuff
};
For clarification reasons, here's the functionality I'm looking for (the appearing border-bottom on the header): http://doodle.com/bspuhf6cazqpwhwi

window.scrollY is your friend.
function checkScroll() {
if(window.scrollY > 0) {
// add classname
} else {
setTimeout(checkScroll, 300) // check again after 300ms
}
}
checkScroll()

$(window).scroll(function() {
if ($(window).scrollTop() > 0) {
// Do stuff
} else {
// Do other stuff
}
});

Related

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

Navbar fade In when back to top

I was trying this jQuery example
(function ($) {
$(document).ready(function(){
// hide .navbar first
// $(".masthead").hide();
$(".masthead").css("background-color","inherit");
// fade in .navbar
$(function () {
$(window).scroll(function () {
// set distance user needs to scroll before we fadeIn navbar
if ($(this).scrollTop() > 600) {
$('.masthead').fadeIn();
$(".masthead").css("background-color","black");
} else if($(this).scrollTop === 0){
$('.masthead').fadeIn();
} else {
$('.masthead').fadeOut();
}
});
});
});
}(jQuery));
It shows the menu/navbar when I run the page and disapears when I start scrolling and after 700 pixels navbar is displayed again with black background, I expected it to fade in again after I come back to the top.
if($(this).scrollTop === 0){
$('.masthead').fadeIn();
}
But it have not worked. How do scrollTop() work then? I have also tried to set scrollTop < 10, but with no success. How do I make it work when I'm back at 10 pixels or zero?
You're comparing the function body to 0, not the actual results of the function (the scroll value), so this:
if($(this).scrollTop === 0){
$('.masthead').fadeIn();
}
should become this:
if($(this).scrollTop() === 0){
$('.masthead').fadeIn();
}
TL;DR
It's scrollTop vs. scrollTop().

Display on scroll

I'm struggling to get the following code working. Basically I'm trying to get .cbp-fbscroller in my css to make my new navigation menu on the side in the html page only appear at 900px on scroll down, but being new to JavaScript I don't know how to get the code working.
So once it reaches 900px the navigation on the side will appear. I have made a fiddle so you guys can see more of the code
Demo
$(document).scroll(function(){
if ($(document).scrollTop() >= 100) {
if ($(".main").css('display') === 'none') {
$(".cbp-fbscroller").fadeIn('slow');
$(".main").prev().fadeOut();
$(".cbp-fbscroller").next().fadeOut();
}
} else {
/* if ($(".main").css('display') !== 'none') {
$(".cbp-fbscroller").fadeOut('slow');
$(".main").prev().fadeIn();
$(".cbp-fbscroller").next().fadeIn();
} */
}
})
If I correctly understod your question, basicly you need this:
$(function() {
$(window).on('scroll', function() {
if ($(window).scrollTop() >= 900) {
$('.cbp-fbscroller nav').fadeIn('slow');
} else {
$('.cbp-fbscroller nav').fadeOut('slow');
}
});
});
fiddle: http://jsfiddle.net/6oaxt61a/10/
and a change in your HTML
<nav>
to
<nav style="display:none;">
If I get what you are trying to do correctly, your code should be looking something like this:
$(document).scroll(function(){
if ($(document).scrollTop() >= 100) {
if ($(".main").css('display') === 'none') {
$(".cbp-fbscroller").fadeIn('slow');
$(".main").prev().fadeOut();
$(".cbp-fbscroller").next().fadeOut();
}
} else {
/* if ($(".main").css('display') !== 'none') {
$(".cbp-fbscroller").fadeOut('slow');
$(".main").prev().fadeIn();
$(".cbp-fbscroller").next().fadeIn();
} */
}
})
The part I comment out is just incase you want to revert the action.
What you are lacking:
No event attached. That was fixed by $(document).scroll(function(){...
'"foobar"' will only raise an error. use either 'foo' or "bar"
Hope I interpret you correctly.

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.

Why my fix menu in not working smoothly on scrolling.

$(window).scroll(function() {
var windscroll = $(window).scrollTop();
if (windscroll >= 5) {
$('#page-header').addClass('fixed');
} else {
$('#page-header').removeClass('fixed');
}
}).scroll();
Why my fix menu in not working smoothly on scrolling. i am using in my moodle theme frontpage.php or i have to add some thing for smoothness.
You're modifying the DOM too frequently, as $(window).scroll fires multiple times in a single scroll. Consider checking the existence of the class before add or remove it.
$(window).scroll(function() {
var windscroll = $(window).scrollTop();
if (windscroll >= 5) {
if(!$('#page-header').hasClass('fixed')) {
$('#page-header').addClass('fixed');
}
} else {
if(!$('#page-header').hasClass('fixed')) {
$('#page-header').removeClass('fixed');
}
}
});
also, I removed an extra .scroll() call at the end of the script.
Alternatively, you can make use of a jQuery On Screen plugin which will add a pseudo class :onscreen with the div visible in the browser. Codes are as follow:
$(document).scroll(function() {
if($("#page-header").is(':onScreen')) {
console.log("Element appeared on Screen");
if(!$('#page-header').hasClass('fixed')) {
$('#page-header').addClass('fixed');
}
} else {
console.log("Element not on Screen");
if(!$('#page-header').hasClass('fixed')) {
$('#page-header').removeClass('fixed');
}
}
});
See if the plugin fits your needs.

Categories