We Keep Coding

Jquery : animate navbar to top on scoll

I want to animate my navbar to animate to top: 0 on page scroll. Right now my nav is coming after slider image.
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() === 100) { // this refers to window
$('.navbar').animate('top': 0);
} else {
$('.navbar').animate('top': 300);
}
});
})
But this code is not working.

Jquery animate function is wrong
$('.navbar').animate({top: "0px"});
$('.navbar').animate({top: "300px"});
In css you need to have position fixed or absolute

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

javascript, animate and fadeout together

I need to animate an image and fade it out at the same time.
The image is situated in the right of the page, I need to move it to the left and fade it out so that when it reaches the left it is totally disappeared. I tried to combine .fadeOut and .animate (see example below) but actually the image moves, stops and then fadeout. Can you help me?
<script>
$("#link").click(function() {
$("#image").animate({
marginLeft: "-1000px"
}, 1500).fadeOut(1600);
});
</script>
Thank you

Change the opacity of the element. By settings this to zero, the element will fadeout to the duration of the animation.
Code:
$('#link').click(function() {
$('#image').animate({
marginLeft: '-100px',
opacity: 0
}, 1500);
});
Example: http://jsfiddle.net/QqfLL/

Set opacity of #image to 0 and try this :
$("#link").click(function() {
$("#image").animate({
marginLeft: "-1000px",
opacity: 1
}, 1500);
});
You will have to check if this work correctly in IE.

Set divs opacity related to scroll position

I'm trying to set the opacity of a series of divs based on their individual proximity to scrollbar position.
This is what I have so far - http://jsfiddle.net/jGeYg/1/
I've managed to set the opacity to 0 when you are at the top of the window and it raise to 1 as you get to the top of div.
What I'm trying to acheive is for it not to start raising in opacity until you are 50px above the div and hit full opacity when you are at the top of the div. Essentially it's range where opacity changes is
$('div').position().top - 50 -> $('div').position().top //psuedo code
I don't want to use a plugin. I'm having trouble with the math rather than the code.

http://jsfiddle.net/b9ZCk/3/
I've added some debug text to show the position and opacity.

I am not sure if this is the desired effect that you want.. but try and let me know,
$(window).scroll(function() {
var st = $(this).scrollTop();
$('.block').each(function(index) {
if (($(this).offset().top-st) < 50) {
$(this).css({
'opacity': (0 + (st / $(this).offset().top))
});
} else {
$(this).css({'opacity': 0.1});
}
})
});
DEMO: http://jsfiddle.net/skram/jGeYg/5/

Fading Element on Scroll

I'm curious how I can create a DIV (or anything really) that I can fade (or change opacity of) when a user scrolls down the page. This DIV would sit at the top of the page, but only be clearly visible when at the very top of the page.
Additionally, it would be ideal if I I could have this element fade back in onmouseover, regardless of the current scrolled position on the page.

jQuery would allow for a succinct solution, whilst hiding most browser discrepancies. Here's a quick mock-up to get you started:
<script type="text/javascript">
//when the DOM has loaded
$(document).ready(function() {
//attach some code to the scroll event of the window object
//or whatever element(s) see http://docs.jquery.com/Selectors
$(window).scroll(function () {
var height = $('body').height();
var scrollTop = $('body').scrollTop();
var opacity = 1;
// do some math here, by placing some condition or formula
if(scrollTop > 400) {
opacity = 0.5;
}
//set the opacity of div id="someDivId"
$('#someDivId').css('opacity', opacity);
});
});
</script>
See also:
jQuery
Selectors
CSS
Events/Scroll
CSS/ScrollTop
CSS/ScrollLeft

I thought I would give it a go using the actual value of scrollTop to dictate the opacity level, thus getting a smooth fade. I also added the hover state for the second part. Thanks to David for refining the maths for me.
//reduce the opacity of the banner if the page is scrolled.
$(window).scroll(function () {
var height = $("body").height();
var scrollTop = $("body").scrollTop();
var opacity = 1;
if(scrollTop < 41)
{opacity = 1-Math.floor(scrollTop)/100;}
else
{opacity = 0.6;}
$("#header").css("opacity", opacity);
$("#header").hover(function(){
$(this).css("opacity", 1);
},function(){
$(this).css("opacity", 0.6);
});
});

Use scroll event, and analyse value of document.documentElement.scrollTop to set appropriated opacity.
http://www.quirksmode.org/dom/events/scroll.html