使用Javascript问题粘贴一个div

我想让我的右手栏div向下滚动，我遇到了一些问题，我尝试过使用position：fixed;但我宁愿它保持静止，直到它滚动过去。使用Javascript问题粘贴一个div

<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>

看起来非常接近我想要的东西，但它似乎并没有工作。这里是一些使用CSS IM的：

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>

我一直在这几天的现在似乎无法破解它 http://jsfiddle.net/dHW6b/1/

来源

2013-08-23 George

张贴您的HTML。或创建一个小提琴。 –

请创建一个小提琴。 –

@AvinVarghese“Javascript”不是“JavaScript”:) –

你可以用下面的代码来做到这一点。

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代码

$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); 
    } 
}

不要忘了添加jQuery和jQuery.easing库。

你就完成了。

来源

2013-08-23 10:49:44

这是否会让我的右列超过我的菜单栏顶部？http：//jsfiddle.net/dHW6b/1/ – George

使用Javascript问题粘贴一个div

回答

相关问题