I have the following script:
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
$("#reas").fadeIn(2000);
$(".footer").fadeIn(2000);
$(".master_footer").css("position", "relative");
}
});
The script above changes the position of .master_footer if the user scrolls below #reas. But when i go up the position for .master_footer remains at relative. What can I do to reset it to position:absolute when the user scrolls back up?
by changing only the js code:
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
$("#reas").fadeIn(2000);
$(".footer").fadeIn(2000);
$(".master_footer").css("position", "relative");
}else{
$(".master_footer").css("position", "absolute");
}
});
But i would rather use something like:
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
$("#reas").fadeIn(2000);
$(".footer").fadeIn(2000);
$(".master_footer").addClass('relative');
}else{
$(".master_footer").removeClass('relative');
}
});
and then you can just custom your css
.relative{ position:relative; }
Assuming you've set the css for the .master_footer element previous to setting it with the javascript: in your javascript, when you want to reset the element back to its default style, just remove the style attribute from the element:
$(".master_footer").removeAttr("style");
for example:
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
$("#reas").fadeIn(2000);
$(".footer").fadeIn(2000);
$(".master_footer").css("position", "relative");
} else if ($(window).scrollTop() < 500){ // <-- set your reset point here
$(".master_footer").removeAttr("style");
}
});
where you would set the else if statement to whatever point you wanted to reset your element at.
First of all, I would recommend a polling solution rather than attaching an event handler to the scroll event, particularly if you intend to support older versions of IE, some of which seem to trigger the event for each pixel scrolled! E.g., you can check the scroll position as you are once per second.
Secondly, since you are using 2000ms fades, you should hold in a variable the state of the elements being faded so you don't fire a fadeOut event while the element is still being faded in (or at the very least you can stop() the existing animation).
And as far as your original question is concerned, it looks like maybe you should be able to set $('.master_footer').css('position', 'absolute') when (t < y) if you are setting position to relative when t == y. (You also might want to check t >= y in case the browser being used supports overscroll).
Related
I need to hide an element on scroll - but only if its not already hidden.
I've written the following jQuery but it's not working for some reason - any tips please?
The css class open-style-switcher and close-style-switcher determine a css scroll anim. I want to wait until the page has scrolled to a certain height, then auto hide the search box if it contains the open class.
Where am I going wrong!?
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
$('#search-box').hasClass('open-style-switcher').toggleClass("open-style-switcher", "close-style-switcher", 1000);
}
});
"toggleClass" can receive two classes separated by space
Also creating "$searchBox" variable to avoid double search in DOM.
And as was told before: hasClass() returns boolean
Here it is:
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
var $searchBox = $('#search-box');
if ($searchBox.hasClass('open-style-switcher'))
{
$searchBox.toggleClass("open-style-switcher close-style-switcher", 1000);
}
}
});
.hasClass() - Returns: Boolean determines whether any of the matched elements are assigned the given class.
In your scenario, addClass and removeClass is more suitable.
See below :
$(window).scroll(function() {
var scroll = $(window).scrollTop();
var searchbox = $('#search-box');
if (scroll >= 500 && searchbox.hasClass('open-style-switcher')) {
searchbox.removeClass("open-style-switcher");
searchbox.addClass("close-style-switcher", 1000);
}
});
toggleClass() does not work in the way you, or even the other answers, think it does. It only adds and removes classes, not exchange them for others. See toggleClass() documentation here.
if (scroll >= 500) {
if($('#search-box').hasClass('open-style-switcher'))
{
$('#search-box').removeClass("open-style-switcher");
$('#search-box').addClass("close-style-switcher");
}
}
I imagine you will also want an else block that does the inverse of this. Perhaps the below is a more straight forward way of doing what you want to achieve as there may not be any point in the check to see if the #search-box already has the open-style-switcher class.
if (scroll >= 500) {
$('#search-box').removeClass("open-style-switcher").addClass("close-style-switcher");
}
else
{
$('#search-box').removeClass("close-style-switcher").addClass("open-style-switcher");
}
Hello! I've been learning jQuery for a little while now and am trying to sharpen my skills by creating a responsive website. I added a navigation bar, then a big slider, and below it is the main content of the website. Right now, jQuery (as both the menu background and the main background are black) adds a class to the navigation bar in order to turn it white as soon as you scroll past the slider (which has a height of 550px), so it will be easier to read.
Here's the thing: I want jQuery to add that class depending on the width of the window. If it's less than 600px wide, I want the class to be added automatically. Otherwise, I want jQuery to add it as soon as you scroll past the slider (since I hide it when the window is less than 600px wide). My code is below, and it works just fine if I resize the window and then refresh the page, but I want it to add the class dynamically. Do you think it is possible?
I hope I made myself clear (English is not my first language). Let me know if you need me to explain things better! Thank you in advance. :)
if ($(window).width() > 599 ) {
$(window).scroll(function() {
if ($(window).scrollTop() >= 550) { //if you scroll past the slider
$("#main nav").addClass("white-menu");
} else {
$("#main nav").removeClass("white-menu"); //so it turns black again
}
});
} else {
// add it automatically (the slider is hidden):
$("#main nav").addClass("white-menu");
};
you can use all the code inside scroll event
$(window).scroll(function() {
if ($(this).scrollTop() >= 550 && $(this).width() <= 599) { //if you scroll past the slider
$("#main nav").addClass("white-menu");
} else {
$("#main nav").removeClass("white-menu"); //so it turns black again
}
});
a similar DEMO
about resize you can use
$(window).on('resize',function() {
$("#main nav").removeClass("white-menu");
});
on window resize the code will remove the class till user scroll then the scroll event will fire after user scrolling
or instead of all of that you can just use
$(window).on('scroll resize',function() {
if ($(this).scrollTop() >= 550 && $(this).width() <= 599) { //if you scroll past the slider
$("#main nav").addClass("white-menu");
} else {
$("#main nav").removeClass("white-menu"); //so it turns black again
}
});
DEMO
.scroll allows you to listen to event, if you only listen when the window is the correct size, this listener won't get triggered if that changes, so I changed it around a bit:
$(window).scroll(function() {
if ($(window).width() > 599 ) {
if ($(window).scrollTop() >= 550) { //if you scroll past the slider
$("#main nav").addClass("white-menu");
} else {
$("#main nav").removeClass("white-menu"); //so it turns black again
}
}
});
Like Brian mentioned you should use CSS for this other case:
#media (max-width: 600px) {
#main nav {
// white-menu styles here
}
}
For reference the JS way would be:
$(window).resize(function() {
if ($(window).width() <= 599 ) {
$("#main nav").addClass("white-menu");
}
});
It also might be worth thinking about doing a throttle/debounce on these event listeners. They will get called a lot and if your JS starts to do anything more complicated you will see a performance hit. This example uses the underscore library:
var onScroll = function() {
if ($(window).width() > 599 ) {
if ($(window).scrollTop() >= 550) { //if you scroll past the slider
$("#main nav").addClass("white-menu");
} else {
$("#main nav").removeClass("white-menu"); //so it turns black again
}
}
}
// Don't run until the window has stopped being resized for at least 50ms
var debouncedOnScroll = _.debounce(onScroll, 50);
$(window).scroll(debouncedOnScroll);
See http://underscorejs.org/#debounce
Interesting. I used your code in a fiddle and it worked find. As it's state in another answer, the improve of your code will be using the scroll function to wrap all the actions:
$(window).scroll(function() {
$("#main nav").toggleClass("white-menu", ($(window).scrollTop() >= 550 && $(window).width() <= 599));
});
So I am using jQuery scrollTop() to change the CSS class of a specific element based on how far down the page you one (one page website). However, this requires me to adjust the jQuery when the sections of the page grow larger in height.
Is there any good way to change the CSS class based on the current ID you are at in the page? or does it need to be based on how far down you are in terms of pixels?
This is the code I am currently using:
<script>
$(window).bind('scroll', function() {
if($(this).scrollTop()>= 0 && $(this).scrollTop() < 550){
$('.homeLink').addClass('selected');
}
else {
$('.homeLink').removeClass('selected');
}
});
$(window).bind('scroll', function() {
if($(this).scrollTop()>= 575 && $(this).scrollTop() < 1900){
$('.photosLink').addClass('selected');
}
else {
$('.photosLink').removeClass('selected');
}
});
$(window).bind('scroll', function() {
if($(this).scrollTop()>= 1950 && $(this).scrollTop() < 3000){
$('.aboutLink').addClass('selected');
}
else {
$('.aboutLink').removeClass('selected');
}
});
</script>
It would be really cool to have it just change based on the ID it's at. Any ideas?
You could get the position of a target element with a certain ID, and change the behavior of the window scroll function based on whether you had reached that position yet.
// in window scroll function do this
var pos = $(window).scrollTop();
var elemTop = $('#someElement').position().top;
if (pos > elemTop) {
doSomething();
}
For example, see this fiddle
I'm using the following javascript for the top of page logo/section before the footer here:
<div id="townEnd">InsideTown</div>
<script>
$(document).ready(function(){
// hide #townEnd first
$("#townEnd").hide();
// fade in #townEnd
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 1000) {
$('#townEnd').fadeIn();
} else {
$('#townEnd').fadeOut();
}
});
// scroll body to 0px on click
$('#townEnd a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
</script>
How would I calculate when the logo should fadein at the end of the page? I just used 1000 as an example. It only seems to work when I scroll really fast too.
First, you should just use this.scrollTop instead of $(this).scrollTop() - it might not look like much to you, but it is a HUGE thing.
On the same path, you can use this.scrollHeight to get the height of the scrollable area. Subtract this.innerHeight to get the maximum scroll position, then subtract about 30 pixels to give yourself some padding.
if( this.scrollTop < this.scrollHeight - this.innerHeight - 30)
You should also have a boolean to keep track of the state of the element, maybe isfadedin, which you update. Then, only call fadeIn and fadeOut if the state changes. This will save a LOT of processing time!
Vanilla JS is awesome :p
I've been working on a scroll to top function for my website, and that part of it works fine. My problem is however that I have a fixed div that is overlapping my footer when it hits the bottom of the page.
Here is the function that I have working.
$(document).scroll(function (e) {
if (document.body.scrollTop >= 800) {
$('#beamUp').show(1000);
} else {
$('#beamUp').hide(1000);
return false;
}
});
Is there somehow I could detect when I hit that part of the page and stop the div from moving past that.Help is much appreciated!
jsFiddle: http://jsfiddle.net/zazvorniki/RTDpw/
Just get the height of the page, minus the height of the div in question, as well as the footer... make sure the top is never greater than that value... you'll also need an onresize event handler re-evaluate that value.
looking at your jsfiddle... here are my edits
In your scroll listener, I am checking for the position of the page, and adjusting the bottom position of the floater appropriately. I also set the initial display:none, so you don't need to call .hide() in your initial script. In addition, resizing the window has the effect of scrolling for your use, so I changed the listener for both events.
$(document).on('scroll resize', function (e) {
var viewHeight = $(window).height();
var viewTop = $(window).scrollTop();
var footerTop = $("footer").offset().top;
var baseline = (viewHeight + viewTop) - footerTop;
var bu = $("#beamUp").css({bottom: (baseline < 0 ? 0 : baseline) + 'px'});
if (viewTop >= 50) {
bu.show(1000);
} else {
bu.hide(1000);
}
});