...

View Full Version : How do I make an a div element appear upon a scroll amount?



a_Lot
02-17-2012, 11:53 PM
I'm currently using Squarespace's engine to build my site. I'm failing using java and css to make a specific image/div element appear/disappear upon a scroll amount or Y value of the page. I've tried if/else values using display:block and display:none, but can't seem to get the image to disappear upon a specific scroll value nor can I get it to appear/reappear.


<script type="text/javascript">
floatingMenu.add('floatdiv',
{
targetRight: 10,
targetBottom: 10,
snap: true
});
</script>

<script type="javascript">
function hideDiv() {
if (document.getElementById('floatdiv').scrollamount > 100)
{
document.getElementById('floatdiv').style.display='none';
}
else
{
document.getElementById('floatdiv').style.display='block';
}

<div id="floatdiv" style="
position:fixed;
bottom:10px;right:200px;
padding:0px;background:#FFFFFF;
border:0px solid #2266AA;
z-index:100;
display:block">
<img src="picture.jpg" name="imagename" border="0" align="right" height="262" width="184">
</div>
</script>


What's putting the kink in the code is the "if/then" script. Where did I go wrong?

cercos
02-18-2012, 04:28 AM
I know you can do this with jQuery much easier. You just compare the element in relation to the page using $(div).scrollTop() and elementHeight

a_Lot
02-21-2012, 10:38 PM
Hey, thanks for the reply. I don't know javascript very well. Is there any way to do it in css or html format with out using jquery? I've tried to learn it, but everything I know is pure trial and error. Therefore, my entire template for blogs and whatnot would be moot. I'd like to learn it someday, but is there a way around jQuery for this particular instance?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum