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/
Related
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; }
As my title says, my sticky header is causing the subsequent div to jump about 100 pixels when the navbar reaches the top of the page. It's like the home div is magically losing 100 pixels of its height. I've tried a couple things but haven't been able to get this to work.
I have added plugins for smooth scrolling but couldn't get it to work in the jsfiddle. If you scroll down slowly when the navbar is getting to the top of the page, you will notice the skip.
Thanks for your help!
http://jsfiddle.net/g9N78/2/
here is the code I'm using for the sticky header:
<script>
function moveScroller() {
var move = function() {
var st = $(window).scrollTop();
var ot = $("#nav").offset().top;
var s = $(".nav");
if(st > ot) {
s.css({
position: "fixed",
top: "0",
background: "rgba(0,0,0,0.65)"
});
} else {
if(st <= ot) {
s.css({
position: "",
top: "",
background: "black"
});
}
}
};
$(window).scroll(move);
move();
}
</script>
<script type="text/javascript">
$(function() {
moveScroller();
});
</script>
Since you are removing that object from the DOM flow the space is available and the element under takes it, you can just add some margin to #home like this:
$('#home').css('marginTop','100px');
Check this Demo http://jsfiddle.net/g9N78/3/
Use the jQuery .height() method to find out the height of your nav bar, save it to a variable, then apply that height to the top margin of the page, to make it fill the space that the nav bar used to occupy.
$(".nav").height();
$('#home').css('marginTop', navHeight);
See the fiddle below...
http://jsfiddle.net/g9N78/8/
jQuery:
function moveScroller() {
var move = function() {
var st = $(window).scrollTop();
var ot = $("#nav").offset().top;
var s = $(".nav"),
navHeight = s.height();
if(st > ot) {
s.css({
position: "fixed",
top: "0",
background: "rgba(0,0,0,0.65)"
});
$('#home').css('marginTop', navHeight);
} else {
if(st <= ot) {
s.css({
position: "",
top: "",
background: "black"
});
}
$('#home').css('marginTop', '0');
}
};
$(window).scroll(move);
move();
}
There is no magic involved. As long as you do not reach the scroll-top, the header is position:static. The following div will be displayed under the Top. As soon as the element is set to position: fixed, you "lose" the height of the header, causig the optical jump.
I don't think you need Javascript for your header to be sticky.
Try removing the javascript and add this css:
body
{
padding-top: 90px;
}
.nav
{
position: fixed;
top: 0px;
height: 90px;
width: 100%;
}
Edit: Sorry I did not think about your Logo. So this will not work for you like that.
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');
}
});
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;
}
}
});
}
});
my page contains a header which stays on top of a dark image. The image is the exact same size as the viewport from the browser.
My goal is, when I scroll down the page and the header passes the image completely, that the background-color of the header changes.
Is that possible - and how?
Thanks
You can done it by using jquery's "scrollTop":
$(window).scroll(function() {
if ($(window).scrollTop() > sumValue) {
$('#header').css('background', 'yellow');
}
})
"sumValue" refer the amount of scroll you want the user to travel until you change the background.
Please look at the Fiddle
$(function() {
var image = $('.image'),
winHgt = $(window).innerHeight();
image.css({ height: winHgt });
$(window).scroll(function() {
var header = $('#header'),
winHgt = $(window).innerHeight();
if ($(window).scrollTop() > winHgt) {
$('#header').css({ background: '#333' });
}
else if ($(window).scrollTop() < winHgt) {
$('#header').css({ background: '#888' });
}
});
});