Develop Reference

Jquery Hide header at first and show it on scroll up

Here’s a demo page.
https://codyhouse.co/demo/full-screen-pop-out-navigation/index.html
How to hide the header when the screen is on the top of the page, and it will only show on scroll up

hi try following...
$(window).scroll(function() {
var _hideVal = 50; //You can change this value...
if ($(window).scrollTop() > _hideVal)
{
$('.header-holder').fadeIn();
}
else
{
$('.header-holder').fadeOut();
}
});

Bootstrap template header animation

I am trying to make the bootstrap header of this umbraco uSkinned template http://synergy-bs.uskinned.net/ behave like the header of this template http://source-v4.uskinned.net/
The first thing is that I will need to do is stop the animation of the header poping down after a certain scroll position has been reached, I cannot find how this is firing and do I modify the css or the javascript?
Thanks.

Edit this:
$(window).on("scroll", function() {
var fromTop = $(window).scrollTop();
$("body").toggleClass("down", (fromTop > 300));
});
In the file applications.js to:
$(window).on("scroll", function() {
var fromTop = $(window).scrollTop();
$("header").toggleClass("up", (fromTop > 100));
});
Then add to your css:
header.up {
top: -100px;
}

Add on scroll header effect / transition with position property

I have a header which position:absolute on load I need to display it fix on particular scrolling so it working ..
but problem is that how I use header effect (i.e display with delay from upward) with position:fixed property.
code:
CSS
.iaw-header {
position:absoulte
}
JS:
{
if (jQuery(window).scrollTop() >= 700) {
jQuery('.iaw-header').css('position','fixed');
});
}

HTML
<div id="header">
Header text here.
</div>
CSS
.header { position: absolute; }
JS
if (jQuery(window).scrollTop() >= 700) {
$('#header').css('top', '-300px');
$('#header').css('position', 'fixed');
$('#header').animate({top: 0}, 1000);
} else {
$('#header').animate({top: '-300px'}, 1000, function () {
$('#header').css('top', 0);
$('#header').css('position', 'absolute');
});
}
So when the site loads (in CSS), the header can have top: -300px;, and when the user scrolls, you transition (or set) the header's top to 0px, so it scrolls down from the top.

$(window).scroll(function () {
var i = $('.iaw-header')
var h = i.outerHeight(true);
if ($(window).scrollTop() > h) {
if (!i.hasClass('fixed')) i.hide().addClass('fixed');
}
if ($(window).scrollTop() >= 400) {
i.slideDown('fast');
} else {
i.removeClass('fixed').show();
}
});
Add a class in your style:
.fixed {position: fixed;top:0; left:0;width: 100%; }
Perhaps, not the best code but still you can start building on it and modify to make it better. Here is the Jsfiddle link :http://jsfiddle.net/lotusgodkk/gxRC9/200/

jQuery change css properties smoothly on scroll

I want to change the height of the header and add a class to it on the scroll. However I want to do it smoothly using the jQuery animate (or similar effect).
The idea is to make the header sticky on the scroll and remove the sub header from it when it is in sticky form. That's why I fade out subheader when it is being scrolled. Is there a better way to do that?
I have managed to do that with following code, however if you see the demo, the css changes are not smooth, it somehow jerky.
Demo:
http://jsfiddle.net/kcW9a/
Here's the code:
var height = $('header').outerHeight();
$(window).scroll(function() {
if($(this).scrollTop() > height)
{
$("header .subheader").fadeOut(200);
$('header').addClass('stick');
$('header').stop().animate({'height' : '50'}, 200);
}else if($(this).scrollTop() <= height)
{
$('header').removeClass('stick');
$("header .subheader").fadeIn(200);
$('header').stop().animate({'height' : '100'}, 200);
}
});
$(window).scroll();

Change css style for fixed head with your sticky head effect
header{
height: 100px;
background: green;
position:fixed;
width:100%;
}

Try using a callback to the fadeOut() call. Fiddle: http://jsfiddle.net/myTerminal/kcW9a/1/
fadeOut(200, function () { $('header').addClass('stick'); });

$(window).scroll(function() {
if($('#main').offset().top === 0) {
$('.subheader').fadeIn(600);
$('#main').stop().animate({ height: '100px' }, 300).removeClass('stick');
}
else {
$('.subheader').fadeOut(1);
$('#main').stop().animate({ height: '50px' }, 300).addClass('stick');
}
});

How to achieve floating div on scrolldown

I am a newbie on jquery, and I want the div to hang on top of the screen when the page scrolldown is more than 50, how can I achieve this?
I want the div to be always absolute and not fixed.
http://jsfiddle.net/8UCcY/
$(document).ready(function () {
$(window).scroll(function () {
if ($(window).scrollTop() > 50) {
$(".articlebutton").css("top", "0px"); //I want this value to change dynamically as the scrollbar moves down, so that the div stays on top of screen
} else {
$(".articlebutton").css("top", "-50px");
}
});
});

You can set it to position top -100 since it is -50 and scroll occurs after 50:
$(".articlebutton").css("top", ($(window).scrollTop()-100)+"px");

Try this:
$(document).ready(function () {
$(window).scroll(function () {
if ($(window).scrollTop() <= 50) {
$(".articlebutton").css("top", $(window).scrollTop() - 50); //I want this value to change dynamically as the scrollbar moves down, so that the div stays on top of screen
} else {
$(".articlebutton").css("top", $(window).scrollTop() - 100);
}
});
});
Fiddle

DEMO
Try this
$(document).ready(function () {
var top = $(".articlebutton").css('top');
$(window).scroll(function () {
if ($(window).scrollTop() > 50) {
$(".articlebutton").animate({
"top": $(window).scrollTop() + "px"
}, 400);
} else {
$(".articlebutton").animate({
"top": top
}, 400);
}
});
});
Hope this helps,thank you

You can do something like this on that line:
$(".articlebutton").css("top", $(window).scrollTop());
Or event better, use a position: fixed; top: 0;

Why not simply set a position:fixed; for the div? That way it will always be at the top anyways. See the css below
.articlebutton div
{
position:fixed;
top:0;
}

make the property of div as
div{
position : fixed;
top : 0px;
}
it will make you div always stay on top.. no matter how much you scroll the page

The following code is taken from https://deltafrog.com/create-floating-div-jquery/
jQuery('document').ready(function(){
if(jQuery('.right').length){
jQuery(window).scroll(function(){
var win_width=jQuery(window).width();
if(win_width>1200){
var topoffset=jQuery('.right').offset().top;
var leftoffset=jQuery('.right').offset().left;
var botoffset=jQuery('footer').offset().top;
var block_height=jQuery('.floating-block').height();
botoffset=botoffset-block_height-250;
topoffset=topoffset-200;
var sTop=jQuery(window).scrollTop();
var top_fix_to_abs=botoffset-topoffset;
if(sTop < topoffset){
jQuery('.floating-block').removeClass('curr_fix');
jQuery('.floating-block').removeClass('right_fix');
jQuery('.floating-block').css('top',"");
jQuery('.floating-block').css('left',"");
console.log('h1');
}
if(sTop > topoffset && sTop<botoffset){
jQuery('.floating-block').addClass('curr_fix');
jQuery('.floating-block').addClass('right_fix').css('left',leftoffset);
jQuery('.floating-block').css('top',"");
console.log('h2');
}
if(sTop >=botoffset && sTop>topoffset){
jQuery('.floating-block').removeClass('curr_fix');
jQuery('.floating-block').css('left',0);
jQuery('.floating-block').css('top',top_fix_to_abs);
console.log('h3');
//return;
}
}
});
}
});