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

回答

相關問題