Develop Reference

Changing opacity to a particular value

I'm making a navigation bar which becomes visible slowly as the user scrolls through it in larger screens.
I don't want the opacity to become completely
I want the navigation bar to be a little transparent atleast and the font within it to have opacity value 1.
How can I do it? This below code makes the opacity of the navigation bar completely 1 on scroll action.
$(window).resize(function() {
if ($(window).width() < 480) {
$('.navbar').removeClass("navbar-fixed-top");
$('.navbar').css('opacity', 1)
} else {
$('.navbar').css('opacity', 0)
}
});
$(document).on('scroll', function(e) {
if ($(window).width() > 480)
$('.navbar').css('opacity', ($(document).scrollTop() / 900));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

if you want just background little bit transparent then use background-color: rgba(); .. it will give opacity to background only. otherwise giving opacity to whole wrapper will apply on children too weather you give opacity to children 1.

While scrolling top finding a strange behaviour

I am trying to animate the menu bar(fixed positioned) when its scrolled down the opacity should change to 0.6 and when scrollTop() returns 0 its opacity should be 1.
Its working fine when I scroll down but when I scroll to the top sometimes the code works some times its opacity remains 0.6.
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop() > 0){
$('.navbar').animate({opacity:0.6});
}
if($(window).scrollTop() <= 0){
$('.navbar').css('opacity','1');
}
});
});

try
if ( $(window).scrollTop() > 0)
{
$('.navbar').animate({opacity:0.6});
}
else
{
$('.navbar').css('opacity','1');
}

override fadeout() display: none

Have a fiddle here:
http://jsfiddle.net/BP6rq/1514/
Fades my element out and puts it in a fixed position once it has reached the necessary point. I am using fadeOut() for the back-in effect. The problem is I do not want it to hide. I know about fadeTo, however I haven't been able to achieve that same effect. I've also tried overriding the display: none, but that eliminates the functionality of the fade effect. What can I do to maintain the fade effect, but not have fadeOut() disappear when scrolled back up and back to its original position?
Thoughts?

Use animate() together with css opacity instead of fadeIn fadeOut:
jsFiddle Demo
$(window).bind("scroll", function () {
$.fx.speeds.xslow = 250;
if ($(this).scrollTop() > 50) {
$('#bottomcta')
.animate({
'opacity': 1
},1000)
.addClass('fixed');
} else {
$('#bottomcta')
.animate({
'opacity': 0
},1000)
.removeClass('fixed');
}
});

jquery fadeTo() while scrolling, fading out when going down but not fading in when going back up

I've been trying to fade out a splash when scrolling down, and fading it in when scrolling back to the top of the page. It seems to work ok when scrolling down, but when I go back, it doesn't fades in. I tryed using fadeIn and FadeOut instead of fadeTo but didn't get a proper behavior
The code is actually pretty simple:
var splashTop = $('.splash-container').offset().top;
$(window).scroll(function () {
if ((splashTop - $(window).scrollTop()) < 50) {
$('.splash-container').stop().fadeTo("slow", 0);
} else {
$('.splash-container').stop().fadeTo("fast", 1);
}
});
And here is the jsFiddle example:
jsFiddle

If you just need to check if the scroll is at the top or not then you don't need to check the position of the Splash, Try:
$(window).scroll(function () {
if ($(window).scrollTop() > 0) {
$('.splash-container').stop().fadeTo("slow", 0);
console.log('p')
} else {
$('.splash-container').stop().fadeTo("fast", 1);
console.log(box1Top)
}
});
Check the Demo Fiddle
Edit
Now why your code doesn't work? ... Because you are always getting a value less than 50:
splashTop = 8 always
-
$(window).scrollTop() = more than 0
Then the result is always negative or 8 as max, you can never have a number more than 8 and your else condition is useless.

How can I shrink a header animated when I scroll down and enlarge it when I scroll up?

I'm just going to build me a website. I thought it would be nice if my header is shrinking a litte bit when I'm scrolling down to 30px. Of course it should enlarge again when I'm scrolling up to the top. And thats my problem. I can not find out how I increase the header again! Here is my jQuery Code for the shrink effect:
$(document).ready(function() {
$(window).scroll(function() {
var top = $(document).scrollTop();
if (top > 30) {
$("#header").animate({height:50}, 200);
$("#header").animate({opacity:0.5}, 200);
$("#logoimage").animate({height:40}, 200);
$("#logoimage").delay(20).queue(function() { $(this).css({'margin-top':'20px'});
$(this).dequeue();});
}
})});
I've created a Page on JSFiddle that I can show what i mean: http://jsfiddle.net/Xuryon/s46zzkt2/
I hope somebody knows how to solve that Problem...

This should do it : http://jsfiddle.net/gmdxs42t/
$(document).ready(function() {
var fflag = true;
$(window).scroll(function() {
var top = $(document).scrollTop();
if (top > 30 && fflag) {
fflag = false; //Will stop re-entry on every px scrolled
$("#header").animate({height:50}, 200);
$("#header").animate({opacity:0.5}, 200);
}
if (top<30 && !fflag){ //Will occur when scroll reached top
fflag=true; //Will enable the above condition entry when top exceeds 30
$("#header").animate({height:100}, 200);
$("#header").animate({opacity:1}, 200);
}
})});

You could simply add a class to the body (or to the #header) and use a css transition for the animations:
http://jsfiddle.net/s46zzkt2/1/
js
if (top > 30) { $('body').addClass('foo'); }
else { $('body').removeClass('foo'); }
css
#header { -webkit-transition: all 0.5s ease; transition: all 0.5s ease; }
.foo #header { height: 50px; }