Fade in header when adding and removing classes with jQuery - javascript

I'm designing a nav that has the background bar appear after the user has scrolled down the page a bit. When they scroll back to the top, the bar (background color) disappears. I'm doing it using the instructions over at:
Add/remove class with jquery based on vertical scroll?
It works fine but now I would like to add fading in and out of the bar on scroll. I've tried adding the fadeIn() and fadeOut() methods. Problem is when it fades out, it fades out the whole #nav div! Not just the background colour. Here's the query
$(function() {
//caches a jQuery object containing the header element
var header = $('.noBackground');
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
header.removeClass('noBackground').addClass('blackBackground').fadeIn();
} else {
header.removeClass('blackBackground').fadeOut().addClass('noBackground');
}
});
});
Full, HTML, CSS and jQuery on this fiddle

The problem here is your #nav div is hidden when you scroll back to top. It is because the .fadeOut() method hides the matched elements by fading them to transparent. So you you remove .fadeOut() from else condition and it works fine.
Here is the edited code.
$(function() {
//caches a jQuery object containing the header element
var header = $('.noBackground');
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
header.removeClass('noBackground').addClass('blackBackground').fadeIn();
} else {
header.removeClass('blackBackground').addClass('noBackground');
}
});
});
Edit:
A simple twist will show the effect:
$(function() {
//caches a jQuery object containing the header element
var header = $('.noBackground');
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
if(header.hasClass('noBackground')) {
header.hide();
header.removeClass('noBackground')
.addClass('blackBackground').fadeIn(2000);
}
} else {
if(header.hasClass('blackBackground')) {
header.hide();
header.removeClass('blackBackground')
.addClass('noBackground').fadeIn(2000);
}
}
});
});
Demo Fiddle.

fadeOut() method can be implemented on a jquery element,not on a class..your code is working perfectly fine

Related

Add a class when div is x amount pixels of top of viewport

I would like to have is to add a class to a div when it is, for example, 100 pixels of the top of the viewport. So not after scrolling 100px but when it is 100px below the top of the viewport. Can anybody help me with this?
<script>
jQuery(function() {
//caches a jQuery object containing the header element
var header = jQuery('#v0');
jQuery(window).scroll(function() {
var scroll = jQuery(window).scrollTop();
if (scroll >= 2939) {
header.addClass('fixed1');
}
else {
header.removeClass('fixed1');
}
});
});
</script>
Not sure if this is exactly you want to achieve, but here's the code. If the header is more than 100px away from the top (which is not very usual because then there should be something on top of the header) of the window, then the new class is added to the header.
$(function() {
var $header = $('#v0');
$(window).scroll(function () {
if ($header.offset().top - $(this).scrollTop() > 100) {
$header.addClass('blabla');
} else {
$header.removeClass('blabla');
}
});
});
UPDATE:
Depending on your feedback, this is the first solution that came up to my mind. I think that's the behavior you need. Hope that works for you:
$(function() {
var $header = $('header');
var $video = $('#v0');
var $videoContainer = $('.videoContainer');
$(window).scroll(function () {
// Here we check if video field touches the header, and add 'fixed' class
if ((($header.offset().top + $header.height()) - $video.offset().top) >= 0) {
$video.addClass('fixed')
}
// Since both video and header is fixed now I needed some other
// element to check if we are again getting away from the header
// (scrolling up again) That's why I added the $videoContainer element
// to be able to remove the 'fixed' class.
if ($videoContainer.offset().top > ($header.offset().top + $header.height())) {
$video.removeClass('fixed');
}
});
});
Updated code:
https://jsbin.com/foyoyus/6/edit?html,css,js,output

Fade out div upon element scroll not window position

I have the heading fading out according to the scroll position, however I would like to attach the fadeout to when the user scrolls to the sticky navigation bar to create a better effect.
I tried the following but no luck!
<script>
$(".l-subheader.at_bottom").scroll(function() {
$(".l-titlebar-content").css("opacity", 1 - $(".l-subheader.at_bottom").scrollTop() / 220);
});
</script>
Should be pretty straight forward but I'm a JS novice!
http://scottdavy.co.uk/our-care-plans/
http://scottdavy.co.uk/our-pricing/
Thanks for your help.
Check if the header becomes position:fixed; then apply the fade effect.
<script>
$(".l-subheader.at_bottom").scroll(function() {
if( $(this).css('position') == 'fixed' )
{
$(".l-titlebar-content").css("opacity", 1 - $(".l-subheader.at_bottom").scrollTop() / 220);
}
});
</script>
Try the Following Demo... Smooth Scroll Header & Subheader
https://jsfiddle.net/pratikgavas/D3DDp/38/
JS Code:-
$(window).on("scroll", function(e) {
if ($(window).scrollTop() >= $("#Header").height()) {
$("#Header").fadeOut(500);
$("#SubHeader").css('top','0px');
}else {
$("#Header").fadeIn(500);
$("#SubHeader").css('top','100px');
}
});

fixed menu that is fixed after scrolling past a div

I am creating a fixed position sub-nav menu bar for a responsive site. All the examples I can find of a fixed menu that sticks to top after scrolling are based on a set number of pixels from top.
However, since I am working a responsive site the pixels from top where I need the menu to come in are different based on viewport (on small screens, the menu should appear after more area scrolled down because the content fills are taller area of screen).
I have a working example and am using the following jquery script:
$(document).ready(function(){
$('#navigation a, #fixedbar a').on('click', function(e) {
e.preventDefault();
});
$(window).on('scroll',function() {
var scrolltop = $(this).scrollTop();
if(scrolltop >= 215) {
$('#fixedbar').fadeIn(250);
}
else if(scrolltop <= 210) {
$('#fixedbar').fadeOut(250);
}
});
});
As you can see the fixed bar fades in if more than 215 pixels scrolled from the top. Instead I'd like to have it appear after scrolling past a certain div. That way I know it will come in after user has fully scrolled past the intro text.
Here's my fiddle
Any good examples out there of what I want to do? Or easy way to modify the jquery script? Thanks in advance.
This modification will make it fade in after it passes the static nav
DEMO
var $nav = $("#navigation");
if(scrolltop >= $nav.offset().top + $nav.height()) {
$('#fixedbar').fadeIn(250);
}
else {
$('#fixedbar').fadeOut(250);
}
Demo http://jsfiddle.net/EHhQE/1/
You need to fade out and fade in the navigation when the scroll reaches the bottom and the top of the navigation bar respectively.
var topOfDiv = $('#navigation').position().top;
var bottomOfDiv = $('#navigation').position().top+$('#navigation').outerHeight(true);
And fetched in your code:
$(document).ready(function(){
$('#navigation a, #fixedbar a').on('click', function(e) {
e.preventDefault();
});
$(window).on('scroll',function() {
var scrolltop = $(this).scrollTop();
var topOfDiv = $('#navigation').position().top;
var bottomOfDiv = $('#navigation').position().top+$('#navigation').outerHeight(true);
if(scrolltop >= bottomOfDiv) {
$('#fixedbar').fadeIn(250);
}
else if(scrolltop <= topOfDiv) {
$('#fixedbar').fadeOut(250);
}
});
});
$(document).ready(function ()
{
slider();
});
$(window).scroll(function ()
{
slider();
});
function slider()
{
if (document.body.scrollTop > 208)
$('#fixedMenu').fadeIn(0);
else
$('#fixedMenu').fadeOut(0);
}

Jquery addclass after scrolling 500px

I want to add a class to a div after scrolling 500px down the page using jquery. I found a way of doing it but it's an immediate transition, I want to be able to controll how long it takes to add the class like with the normal Jquery addclass.
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
$(".nav").addClass("navnewclass");
}
});
I tried doing this:
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
$(".nav").addClass("navnewclass", 2000);
}
});
but it was the same.
I want to be able to controll how long it takes to add the class like with the normal Jquery addclass.
addClass is always instantaneous, it's not part of the animation suite.
There are plug-ins that will do class-based animations for you (most notably jQuery UI's addClass override), but jQuery itself does not. Simply adding jQuery UI to your page will make your second example work. But there are other options as well.
Your options are to use one of those plug-ins, or animate the properties directly (using animate) rather than using a class. Note that jQuery only animates certain kinds of properties (not, notably, colors — jQuery UI adds support for animating colors as well).
Here's an example animating a class (with colors) using jQuery UI: Live Copy | Live Source
<style>
.testing {
color: white;
background-color: blue;
}
</style>
<!-- ...and later in the body... -->
<p>After half a second, the div below will spend two seconds animating the addition of a class.</p>
<div class="nav">This is a test .nav element</div>
<script>
setTimeout(function() {
$(".nav").addClass("testing", 2000);
}, 500);
</script>
IT WILL WORK FINE FOR ME.
$(document).scroll(function() {
var scroll = $(this).scrollTop();
if (scroll >= 500) {
setTimeout('$(".nav").addClass("navnewclass")',1000);
}
});
instead of 1000 U can just set your time.
you can do that using jQuery or $ sign
example:
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 100) {
$("#logo-not-scroll").addClass("blue1");
}
else{
$("#logo-not-scroll").removeClass("blue1");
}
});
or
jQuery(window).scroll(function() {
var scroll = jQuery(window).scrollTop();
if (scroll >= 100) {
jQuery("#logo-not-scroll").addClass("blue1");
}
else{
jQuery("#logo-not-scroll").removeClass("blue1");
}
});

Customizing cursor images in scrolling div

I have a div that scrolls content when the cursor is either at the top or bottom (scrolling up or down). I have two customized cursor images- one is supposed to show when the div content is scrolling up and the other when the div content is scrolling down. The script below was written by a stackoverflow member and works only when using standard cursor styles such as wait, pointer, etc. I want to use images, but cannot get it to work correctly. I also do not need the timer in the script below.
<script type='text/javascript' >
var top=0, timer;
$('#repertoirescroll').on('scroll', function() {
clearTimeout(timer);
var scrollTop = $(this).scrollTop(),
cursor = scrollTop > top ? 'pointer' : 'wait';
$('body').css('cursor', cursor);
top = scrollTop;
timer = setTimeout(function() {
$('body').css('cursor', 'default');
}, 500);
});​
</script>
The image names I am using are
url(../images/arrowup.png)
url(../images/arrowdown.png)
*HTML/CSS**
.cursorup {
cursor: url(../images/arrowup.png), auto;
position:relative;
}
.cursordown {
cursor: url(../images/arrowdown.png), auto;
position:relative;
}
scrolling content
Thanks for any help in advance.
To use custom cursors, you use CSS styling:
.curarrowup {
cursor: url(../images/arrowup.png), auto;
}
Then to apply, use jQuery to apply the style:
$(myElement).addClass("curarrowup");
When you want to go back to a normal cursor:
$(myElement).removeClass("curarrowup");
Using $('body') (myElement === 'body') as in your example is fine.
One caveat: in Firefox, the new cursor often will not appear until you actually move the mouse. This is a known bug and I cannot find any workarounds.
Edit: Modifying your code:
var top=0, timer;
$('#repertoirescroll').on('scroll', function() {
var scrollTop, cursor;
clearTimeout(timer);
scrollTop = $(this).scrollTop();
cursor = scrollTop > top ? 'curarrowup' : 'curarrowdown';
$('body').addClass(cursor);
top = scrollTop;
timer = setTimeout(function() {
$('body').removeclass(cursor);
}, 500);
});​

Categories