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");
}
}
Related
I wanted to write some javascript functions for my theme and I'm a newbie in Javascript (So, Please don't laugh at me).
The first function is about navbar that when you scroll 400px, navbar will show from top. And second is about "goto-up" button.
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 400 || document.documentElement.scrollTop > 400) {
document.getElementById("goup").style.bottom = "0";
} else {
document.getElementById("goup").style.bottom = "-100px";
}
};
window.onscroll = function() {goupFunction();};
function goupFunction() {
if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
document.getElementById("navbar").style.top = "0";
} else {
document.getElementById("navbar").style.top = "-50px";
}
};
These two don't work together. I need your help.
#Pedram, Fixed my problem.
Thanks xD ( I added the second function to the first function and now those works together.)
Whenever you assign to window.onscroll, you overwrite the event handler. Instead, use window.addEventListener and/or put both calls in one function.
So remove all window.onscroll = .. lines and add:
window.addEventListener('scroll', function() {
scrollFunction();
groupFunction();
};
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.
$(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.
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
}
});
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;
}
});
})();