problem with animate an scroll

problem with animate an scroll

hi @ll

i wanna place a picture on a fixed position under a vertical menu and the menu can expand. and in the bottom i have a frame. when page load, the position should be calculated with the right margin and when the user scroll the image have to stop bevor it reach the frame of the bottom. and that is the problem. when i scrol slowely, it works, but when i scroll fast, the picture moves over the frame and that shoudn't be. i think it's cause when the scroll event is called again and its still in an animation, the maximum limit is not reached at this moment, so it will do the animation with wrong values again and again. i have tried it in so much ways but nothing worked. can someone hellp me? have someone an idea how can i solve hat?

here is the code:

  1. jQuery(document).ready(function(){
  2.    
  3. var padding= 100; //frame top and bottom
  4. var divmenu_normal = 140; //menu when is ont expanded
  5. var frame_top = padding + divmenu_normal;
  6. var frame_bottom;
  7. var divmenu_read;
  8. var additional_height=0;
  9. var doc_height = jQuery('body').height();
  10. var f1_pos;
  11. var f1_pos_bottom = 0;
  12. var pos_dif = 0;
  13. var act_pos=0;
  14. var lastpos=0;

  16.     divmenu_read = jQuery("#block-menu-menu-hauptnavigation").height(); //read expanded menu
  17.     frame_bottom = doc_height-padding-jQuery('#f1').height(); // Get the bottom frame position
  18.        
  19.     var divtotal = divmenu_read + padding;
  20.    
  21.     if(divmenu_read>=divmenu_normal){
  22.         additional_height = divmenu_read-divmenu_normal - padding;
  23.     }
  24.    
  25.     f1_pos = jQuery('#f1').position().top+additional_height; 
  26.     jQuery('#f1').css("top",f1_pos+"px"); //set the image to the right position with space to the menu
  27.    
  28.    
  29.     jQuery(window).scroll(function(){
  30.         var newpos = 0;
  31.         act_pos=jQuery(window).scrollTop();
  32.         f1_pos_bottom = jQuery('#f1').position().top;
  33.         if(act_pos>=lastpos){ //when new position is higher, its a scroll down
  34.             pos_dif = act_pos-lastpos; //the scrolled different height
  35.             lastpos=act_pos;
  36.          
  37.             if((f1_pos_bottom<=frame_bottom)&&((f1_pos_bottom+pos_dif)<=frame_bottom)){
  38.                  jQuery("#f1").animate({
  39.                     top: '+='+pos_dif,  
  40.                  }, 50, function() {
  41.                     // Animation complete.
  42.                  });
  43.             }
  44.         }else{ //its a scroll up
  45.             pos_dif = lastpos-act_pos; //the scrolled different height
  46.             lastpos=act_pos;
  47.  
  48.             if(act_pos>=frame_top){ 
  49.              jQuery("#f1").animate({
  50.                 top: '-='+pos_dif,  
  51.              }, 50, function() {
  52.                 // Animation complete.
  53.              });
  54.             }
  55.         }     
  56.     });      
  57. });

That's the container which is called(whitout menu):
  1.   <div id="f1">
  2.       <div id="float_logo_wrapper">
  3.             <div id="float_logo"></div>
  4.       </div>
  5.    </div>
and thats the css defintion:
  1. #f1 { position:absolute; top:493px; left:0px; width:100%; height:310px;}
  2. #float_logo_wrapper {width:972px; height:310px;margin: 0 auto;}
  3. #float_logo {
  4. width:310px;
  5. height:310px;
  6. background-image:url('.../be_main/images/float_logo_events.png');
  7. background-repeat:no-repeat;
  8. }









    • Topic Participants

    • simon