jquery - 使用 Javascript 问题粘贴 div

Question

我试图让我的右手列 div 向下滚动，但我遇到了一些问题，我尝试使用 position:fixed;但我希望它在滚动过去之前保持静止。

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

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/

Answer 1

您可以使用以下代码执行此操作。

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

大功告成。