Coller un div en utilisant le (s) problème (s) Javascript

Question

J'essaie d'obtenir le div de la colonne de droite pour faire défiler vers le bas et j'ai quelques problèmes, j'ai essayé en utilisant la position: fixe; mais je préférerais qu'il reste immobile jusqu'à ce qu'il défile.

<script type="text/javascript"> 
$(document).ready(function() { 
    var s = $(".rightcol_infobox"); 
    var pos = s.position();      
    $(window).scroll(function() { 
     var windowpos = $(window).scrollTop(); 
     s.html("Distance from top:" + pos.top + "<br />Scroll position: " + windowpos); 
     if (windowpos >= pos.top) { 
      s.addClass("stick"); 
     } else { 
      s.removeClass("stick"); 
     } 
    }); 
}); 
</script> 

regardé assez proche de ce que je voulais mais cela ne semble pas fonctionner. voici quelques-unes des im en utilisant css:

div.rightcol_infobox { 
float:left; 
margin-left:20px; 
margin-top:20px; 
width:283px; 
padding:0px 2px 10px 2px; 
background-color:#eee; 
border-radius:10px 
} 
div.mainpage { 
float:left; 
clear:left; 
min-width:1000px; 
overflow:visible; 
margin:20px 0px 0px 0px; 
} 
div.maincontent { 
float:left; 
clear:left; 
width:670px; 
margin-top:20px; 
} 
.stick { 
    position:fixed; 
    top:0px; 
} 

HTML:

<!-- Right-column --> 
<div class="rightcol_infobox"> 

<script SRC="../general/Socials_Techauth.js"></script> 

<div class="infobox rounded"> 
<P class="infoboxheading">Enquiries</p> 
<p class="leftcol_text">Enquire about our technical authoring services<A href="..\enquiry\enquirytechnicalauthoring_sb.htm" rel="shadowbox;width=400;height=450"> Click here</a></p> 
</div> 

<div class="infobox rounded"> 
<P class="infoboxheading">See also</p> 
<p class="leftcol_text">Why use Armada to write your online help and user guides? <A href="whyusearmada.htm"> Click here</a></p> 
<script SRC="../general/socials2_techauth.js"></script> 

</div> 


</div> 

je suis dans ce domaine depuis quelques jours semblent maintenant et ne peut pas le casser http://jsfiddle.net/dHW6b/1/

Answer 1

Vous pouvez le faire en utilisant le code ci-dessous.

CSS

#fl_menu{position:absolute; top:50px; left:0px; z-index:9999; width:150px; height:50px;} 
#fl_menu .label{padding-left:20px; line-height:50px; font-family:"Arial Black", Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; background:#000; color:#fff; letter-spacing:7px;} 
#fl_menu .menu{display:none;} 
#fl_menu .menu .menu_item{display:block; background:#000; color:#bbb; border-top:1px solid #333; padding:10px 20px; font-family:Arial, Helvetica, sans-serif; font-size:12px; text-decoration:none;} 
#fl_menu .menu a.menu_item:hover{background:#333; color:#fff;} 
.content{width:520px; margin:50px auto;} 

HTML

<div id="fl_menu"> 
    <div class="label">MENU</div> 
    <div class="menu"> 
     <a href="#" class="menu_item">ONE</a> 
     <a href="#" class="menu_item">SECOND</a> 
    </div> 
</div> 

jQuery code

$float_speed   = 1500; 
$float_easing  = "easeOutQuint"; 
$menu_fade_speed  = 500; 
$closed_menu_opacity = 0.75; 

$fl_menu=$("#fl_menu"); 
$fl_menu_menu=$("#fl_menu .menu"); 
$fl_menu_label=$("#fl_menu .label"); 

$(window).load(function() 
{ 
    menuPosition=$('#fl_menu').position().top; 
    FloatMenu(); 
    $fl_menu.hover 
    (
     function() 
     { 
      $fl_menu_label.fadeTo($menu_fade_speed, 1); 
      $fl_menu_menu.fadeIn($menu_fade_speed); 
     }, 
     function() 
     { 
      $fl_menu_label.fadeTo($menu_fade_speed, $closed_menu_opacity); 
      $fl_menu_menu.fadeOut($menu_fade_speed); 
     } 
    ); 
}); 

$(window).scroll(function() 
{ 
    FloatMenu(); 
}); 

function FloatMenu() 
{ 
    var scrollAmount=$(document).scrollTop(); 
    var newPosition=menuPosition+scrollAmount; 
    if($(window).height()<$fl_menu.height()+$fl_menu_menu.height()) 
    { 
     $fl_menu.css("top",menuPosition); 
    } 
    else 
    { 
     $fl_menu.stop().animate({top: newPosition}, $float_speed, $float_easing); 
    } 
} 

Ne pas oublier d'ajouter jQuery et libs jQuery.easing.

Et vous avez terminé.