Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How do I make an a div element appear upon a scroll amount?

    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.

    Code:
    <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?

  • #2
    New Coder
    Join Date
    Feb 2012
    Posts
    40
    Thanks
    0
    Thanked 9 Times in 9 Posts
    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

  • #3
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •