You read it all.
Second you've got a few crazy things going on in that CSS - in particular the z-index is supposed to just be a number, not measured in pixels. It specifies what layer this tag is on, where each higher number is closer to the user (or put another way, on top of/occluding tags with lower z-indexes).
The animation you're trying to do is basically .fadeIn(), so just set the div to display: none; initially and use .fadeIn() to animate it:
$('#bottomMenu').fadeIn(2000);
.fadeIn() works by first doing display: (whatever the proper display property is for the tag), opacity: 0, then gradually ratcheting up the opacity.
Full working example:
http://jsfiddle.net/b9chris/sMyfT/
CSS:
#bottomMenu {
display: none;
position: fixed;
left: 0; bottom: 0;
width: 100%; height: 60px;
border-top: 1px solid #000;
background: #fff;
z-index: 1;
}
JS:
var $win = $(window);
function checkScroll() {
if ($win.scrollTop() > 100) {
$win.off('scroll', checkScroll);
$('#bottomMenu').fadeIn(2000);
}
}
$win.scroll(checkScroll);
share|improve this answer
answered Apr 3 at 21:37
Chris Moschini
4,90513154
about z-index, well really sorry :) that was funny! – AndrewS Apr 3 at 21:41
About your answere! Thanks i didnt try it, but i am sure you made it right!! – AndrewS Apr 3 at 21:41
Is there a way of making it hide if less then 100? jsfiddle.net/sMyfT/2 – AndrewS Apr 3 at 21:48
1
Yup, use a flag: jsfiddle.net/b9chris/sMyfT/3 – Chris Moschini Apr 3 at 22:06
nice!!! Thank you! – AndrewS Apr 4 at 7:23
show 1 more comment
Show div on scrollDown after 800px
up vote
3
down vote
favorite
I want to show a hidden div when scrolling down after 800px from the top of the page. By now I have this example, but I guess it needs modification in order to achive what I am looking for.
EDIT:
[And when scrollUp and the height is less the 800px, this div should hide]
HTML:
css:
.bottomMenu {
width: 100%;
height: 60px;
border-top: 1px solid #000;
position: fixed;
bottom: 0px;
z-index: 100;
opacity: 0;
}
jQuery:
$(document).ready(function() {
$(window).scroll( function(){
$('.bottomMenu').each( function(i){
var bottom_of_object = $(this).position().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
if( bottom_of_window > bottom_of_object ){
$(this).animate({'opacity':'1'},500);
}
});
});
});
Here is a Fiddle of my current code.
jquery html css
share|improve this question
edited Apr 3 at 21:44
asked Apr 3 at 21:20
AndrewS
10410
Have you tried doing it? All you need to do is determine if you are more then 800 pixels down and then show a div. – Steven Apr 3 at 21:29
Yes I tried! But how to determine? – AndrewS Apr 3 at 21:33
2 Answers
activeoldestvotes
up vote
4
down vote
accepted
Try This - jsFiddle
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 800) {
$('.bottomMenu').fadeIn();
} else {
$('.bottomMenu').fadeOut();
}
});
Its simple, but effective.
share|improve this answer
answered Apr 4 at 0:41
apaul34208
4,6852728
Great! so much simpler too!!! :) – Joe DF Apr 4 at 3:15
Yeah! Very simple! – AndrewS Apr 4 at 7:25
up vote
2
down vote
You've got a few things going on there. One, why a class? Do you actually have multiple of these on the page? The CSS suggests you can't. If not you should use an ID - it's faster to select both in CSS and jQuery:
Subscriure's a:
Comentaris del missatge (Atom)
Cap comentari:
Publica un comentari a l'entrada