$(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.
Related
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");
}
}
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.
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.
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'm creating a responsive template and I want to remove the listeners on an element when screen is being resized or is smaller than the specified width.
Imagine an menu which when you hover on it's items, it shows you the sub-menus in normal displays but the same menu in mobile devices will show the sub-menus only by tapping or clicking on the items.
I can't make the undelegate work. In resized screen I still have the mouseover and mouseout event-listeners. I'm not getting any errors in console and I've tried both:
.off('mouseover', 'li')
.off('mouseover')
.undelegate('li', 'mouseover')
.undelegate('li')
and none of them works.
var $window = $(window);
function handleSidenav() {
$(".nav-list").delegate('li', 'mouseover', function(e) {
$(this).find("a").addClass('active');
$(this).find("div.sub-items").toggle();
}).delegate('li', 'mouseout', function(e) {
$(this).find('a').removeClass('active');
$(this).find("div.sub-items").toggle();
});
}
function checkWidth() {
var windowsize = $window.width();
if (windowsize < 767) {
smallScreenDelegation();
} else {
SmallScreenUndelegation();
}
}
checkWidth();
handleSidenav();
$window.resize(checkWidth());
function smallScreenDelegation() {
$(".nav-list").undelegate('li'); //It's not working
$(".nav-list").undelegate('li'); //It's not working
$(".nav-list").delegate('li a:first', 'click', function(event) {
if ($(this).next().is(':hidden')) {
$(this).addClass('active');
$(this).next().slideDown('slow');
} else {
$(this).removeClass('active').next().slideUp('slow');
}
event.preventDefault();
});
}
You need to wrap window in the jQuery object. I'm not sure if you set $window = $(window), but it seems here that $window.width() and $window.resize(checkWidth) are missing parenthesis. I was able to get it working fine once I changed those to $(window). You have to define which event you want to undelegate. I used:
$('.nav-list').undelegate('li', 'mouseover');
Open up console and you can see that it works: http://jsbin.com/efonut/6/edit
Also, it's really best to use .on() and off() vs .delegate() and .undelegate(), but at least this works...
I still don't know what was wrong with undelegate which I couldn't make it work, but I managed to fix my code by using on and off.
As adeneo said I was delegating and undelegating on each window resize which was quiet a bug and I think I fixed that but holding the last state on device variable.
var $window = $(window);
var device;
function desktopSidenav() {
$(".nav-list > li").off('click');
$(".nav-list > li").on('mouseover', function(e) {
$(this).find("a").addClass('active');
$(this).find("div.sub-items").toggle();
}).on('mouseout', function(e) {
$(this).find('a').removeClass('active');
$(this).find("div.sub-items").toggle();
});
}
function handheldSidenav() {
$(".nav-list > li").off('mouseover').off('mouseout');
$(".nav-list > li").on('click', function(e) {
if ($(this).find("div.sub-items").is(':hidden')) {
$(this).find("a:first").addClass('active').next().slideDown('slow');
} else {
$(this).find("a:first").removeClass('active').next().slideUp('slow');
}
e.preventDefault();
});
}
Now I check the window size before doing anything else an I'll hold the device type in device variable. If window is resized, I'm gonna check the device state and do the things based on device type.
if ($window.width() > 767) {
device = 'desktop';
desktopSidenav();
} else {
device = 'handheld';
handheldSidenav();
}
$window.resize(function() {
if ($window.width() > 767) {
if (device == 'handheld') {
device = 'desktop';
desktopSidenav();
}
} else {
if (device == 'desktop') {
device = 'handheld';
handheldSidenav();
}
}
});
If I use delegate and undelegate instead of on and off, the code won't work and I still don't know why, so this cannot be count as a real answer, but I wanted to tell everyone who has a similar problem to use jQuery's on and off instead on delegate.