show hidden element on page scroll

Looking for a simple way to have a hidden element made visible when the page scrolls.

The idea is to have a back arrow appear only when the page has been scrolled horizontally.

trying something along these lines without success ...


<script type="text/javascript">
window.onscroll = function () {
if $("back").is(":hidden") {
$("back").show("slow");
}
}
</script>


The site is here: www.milesjaffe.com.

Thanks --

Which framework are you using? Is it jQuery? Do you have an element <back> on your page? I doubt it. Does the element have the id "back" or a class "back"?

There have to be parentheses around the expression in the if statement.

Did you take a look at jQuery's .scroll() handler? Something in the lines of

$(window).scroll(function() {
if($('#back').is(':hidden')) ....
});

OK, got it running but have a logic problem, I think.

Starting with the DIV hidden, the first part of the coed shows it, and works fine on its own. The second part acts as a toggle, turning visibility off again.

The idea is to use $(window).scrollLeft()==0 to see if the window is at x=0, and then to turn off visibility.


<script type="text/javascript">
$(window).scroll(function (){
if($('#back').is(':hidden')) {
$('#back').show('slow');
}
else if ($(window).scrollLeft()==0); {
$('#back').hide('slow');
}
});
</script>

posted in frameworks jquery ...