js页面滚动浮动层智能定位(jQuery)实例页面

HTML代码：

<span class="paren xml-tagangle" style="color: rgb(0, 0, 153);"><</span><span class="keyword xml-tag xml-tag-open" style="color: rgb(0, 0, 255);">div</span> <span class="builtin xml-attribute" style="color: rgb(34, 34, 204);">class</span><span class="undefined"></span><span class="operator" style="color: rgb(0, 119, 119);">=</span><span class="string" style="color: rgb(34, 136, 34);"><span class="before" style="color: rgb(0, 68, 0);">"</span>float<span class="after" style="color: rgb(0, 68, 0);">"</span></span> <span class="builtin xml-attribute" style="color: rgb(34, 34, 204);">id</span><span class="undefined"></span><span class="operator" style="color: rgb(0, 119, 119);">=</span><span class="string" style="color: rgb(34, 136, 34);"><span class="before" style="color: rgb(0, 68, 0);">"</span>float<span class="after" style="color: rgb(0, 68, 0);">"</span></span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153);">></span>
    我是个腼腆羞涩的浮动层...
<span class="paren xml-tagangle" style="color: rgb(0, 0, 153);"></</span><span class="keyword xml-tag xml-tag-close" style="color: rgb(0, 0, 255);">div</span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153);">></span>

JS代码：

$.<span class="operand">fn</span>.<span class="operand defun">smartFloat</span> <span class="operator" style="color: rgb(0, 119, 119);">=</span> <span class="operand keyword" style="color: rgb(0, 0, 255);">function</span><span class="paren" style="color: rgb(0, 0, 153);">(</span><span class="paren" style="color: rgb(0, 0, 153);">)</span> <span class="paren" style="color: rgb(0, 0, 153);">{</span>
    <span class="operand keyword" style="color: rgb(0, 0, 255);">var</span> <span class="operand defun">position</span> <span class="operator" style="color: rgb(0, 119, 119);">=</span> <span class="operand keyword" style="color: rgb(0, 0, 255);">function</span><span class="paren" style="color: rgb(0, 0, 153);">(</span><span class="operand">element</span><span class="paren" style="color: rgb(0, 0, 153);">)</span> <span class="paren" style="color: rgb(0, 0, 153);">{</span>
        <span class="operand keyword" style="color: rgb(0, 0, 255);">var</span> <span class="operand">top</span> <span class="operator" style="color: rgb(0, 119, 119);">=</span> <span class="operand">element</span>.<span class="operand">position</span><span class="paren" style="color: rgb(0, 0, 153);">(</span><span class="paren" style="color: rgb(0, 0, 153);">)</span>.<span class="operand">top</span><span class="comma">,</span> <span class="operand">pos</span> <span class="operator" style="color: rgb(0, 119, 119);">=</span> <span class="operand">element</span>.<span class="operand">css</span><span class="paren" style="color: rgb(0, 0, 153);">(</span><span class="string" style="color: rgb(34, 136, 34);"><span class="before" style="color: rgb(0, 68, 0);">"</span>position<span class="after" style="color: rgb(0, 68, 0);">"</span></span><span class="paren" style="color: rgb(0, 0, 153);">)</span>;
        $<span class="paren" style="color: rgb(0, 0, 153);">(</span><span class="operand builtin" style="color: rgb(34, 34, 204);">window</span><span class="paren" style="color: rgb(0, 0, 153);">)</span>.<span class="operand">scroll</span><span class="paren" style="color: rgb(0, 0, 153);">(</span><span class="operand keyword" style="color: rgb(0, 0, 255);">function</span><span class="paren" style="color: rgb(0, 0, 153);">(</span><span class="paren" style="color: rgb(0, 0, 153);">)</span> <span class="paren" style="color: rgb(0, 0, 153);">{</span>
            <span class="operand keyword" style="color: rgb(0, 0, 255);">var</span> <span class="operand">scrolls</span> <span class="operator" style="color: rgb(0, 119, 119);">=</span> $<span class="paren" style="color: rgb(0, 0, 153);">(</span><span class="operand keyword" style="color: rgb(0, 0, 255);">this</span><span class="paren" style="color: rgb(0, 0, 153);">)</span>.<span class="operand">scrollTop</span><span class="paren" style="color: rgb(0, 0, 153);">(</span><span class="paren" style="color: rgb(0, 0, 153);">)</span>;
            <span class="operand keyword" style="color: rgb(0, 0, 255);">if</span> <span class="paren" style="color: rgb(0, 0, 153);">(</span><span class="operand">scrolls</span> <span class="operator" style="color: rgb(0, 119, 119);">></span> <span class="operand">top</span><span class="paren" style="color: rgb(0, 0, 153);">)</span> <span class="paren" style="color: rgb(0, 0, 153);">{</span>
                <span class="operand keyword" style="color: rgb(0, 0, 255);">if</span> <span class="paren" style="color: rgb(0, 0, 153);">(</span><span class="operand builtin" style="color: rgb(34, 34, 204);">window</span>.<span class="operand">XMLHttpRequest</span><span class="paren" style="color: rgb(0, 0, 153);">)</span> <span class="paren" style="color: rgb(0, 0, 153);">{</span>
                    <span class="operand">element</span>.<span class="operand">css</span><span class="paren" style="color: rgb(0, 0, 153);">(</span><span class="paren" style="color: rgb(0, 0, 153);">{</span>
                        <span class="operand hashkey" style="color: rgb(170, 85, 17);">position</span><span class="hasharrow" style="color: rgb(255, 0, 0);">:</span> <span class="string" style="color: rgb(34, 136, 34);"><span class="before" style="color: rgb(0, 68, 0);">"</span>fixed<span class="after" style="color: rgb(0, 68, 0);">"</span></span><span class="comma">,</span>
                        <span class="operand hashkey" style="color: rgb(170, 85, 17);">top</span><span class="hasharrow" style="color: rgb(255, 0, 0);">:</span> <span class="operand">0</span>
                    <span class="paren" style="color: rgb(0, 0, 153);">}</span><span class="paren" style="color: rgb(0, 0, 153);">)</span>;    
                <span class="paren" style="color: rgb(0, 0, 153);">}</span> <span class="operand keyword" style="color: rgb(0, 0, 255);">else</span> <span class="paren" style="color: rgb(0, 0, 153);">{</span>
                    <span class="operand">element</span>.<span class="operand">css</span><span class="paren" style="color: rgb(0, 0, 153);">(</span><span class="paren" style="color: rgb(0, 0, 153);">{</span>
                        <span class="operand hashkey" style="color: rgb(170, 85, 17);">top</span><span class="hasharrow" style="color: rgb(255, 0, 0);">:</span> <span class="operand">scrolls</span>
                    <span class="paren" style="color: rgb(0, 0, 153);">}</span><span class="paren" style="color: rgb(0, 0, 153);">)</span>;    
                <span class="paren" style="color: rgb(0, 0, 153);">}</span>
            <span class="paren" style="color: rgb(0, 0, 153);">}</span><span class="operand keyword" style="color: rgb(0, 0, 255);">else</span> <span class="paren" style="color: rgb(0, 0, 153);">{</span>
                <span class="operand">element</span>.<span class="operand">css</span><span class="paren" style="color: rgb(0, 0, 153);">(</span><span class="paren" style="color: rgb(0, 0, 153);">{</span>
                    <span class="operand hashkey" style="color: rgb(170, 85, 17);">position</span><span class="hasharrow" style="color: rgb(255, 0, 0);">:</span> <span class="string" style="color: rgb(34, 136, 34);"><span class="before" style="color: rgb(0, 68, 0);">"</span>absolute<span class="after" style="color: rgb(0, 68, 0);">"</span></span><span class="comma">,</span>
                    <span class="operand hashkey" style="color: rgb(170, 85, 17);">top</span><span class="hasharrow" style="color: rgb(255, 0, 0);">:</span> <span class="operand">top</span>
                <span class="paren" style="color: rgb(0, 0, 153);">}</span><span class="paren" style="color: rgb(0, 0, 153);">)</span>;    
            <span class="paren" style="color: rgb(0, 0, 153);">}</span>
        <span class="paren" style="color: rgb(0, 0, 153);">}</span><span class="paren" style="color: rgb(0, 0, 153);">)</span>;
    <span class="paren" style="color: rgb(0, 0, 153);">}</span>;
    <span class="operand keyword" style="color: rgb(0, 0, 255);">return</span> $<span class="paren" style="color: rgb(0, 0, 153);">(</span><span class="operand keyword" style="color: rgb(0, 0, 255);">this</span><span class="paren" style="color: rgb(0, 0, 153);">)</span>.<span class="operand">each</span><span class="paren" style="color: rgb(0, 0, 153);">(</span><span class="operand keyword" style="color: rgb(0, 0, 255);">function</span><span class="paren" style="color: rgb(0, 0, 153);">(</span><span class="paren" style="color: rgb(0, 0, 153);">)</span> <span class="paren" style="color: rgb(0, 0, 153);">{</span>
        <span class="operand">position</span><span class="paren" style="color: rgb(0, 0, 153);">(</span>$<span class="paren" style="color: rgb(0, 0, 153);">(</span><span class="operand keyword" style="color: rgb(0, 0, 255);">this</span><span class="paren" style="color: rgb(0, 0, 153);">)</span><span class="paren" style="color: rgb(0, 0, 153);">)</span>;                         
    <span class="paren" style="color: rgb(0, 0, 153);">}</span><span class="paren" style="color: rgb(0, 0, 153);">)</span>;
<span class="paren" style="color: rgb(0, 0, 153);">}</span>;

<span class="comment comment-line" style="color: rgb(153, 153, 153);"><span class="before" style="color: rgb(187, 170, 170);">//</span>绑定</span>
$<span class="paren" style="color: rgb(0, 0, 153);">(</span><span class="string" style="color: rgb(34, 136, 34);"><span class="before" style="color: rgb(0, 68, 0);">"</span>#float<span class="after" style="color: rgb(0, 68, 0);">"</span></span><span class="paren" style="color: rgb(0, 0, 153);">)</span>.<span class="operand">smartFloat</span><span class="paren" style="color: rgb(0, 0, 153);">(</span><span class="paren" style="color: rgb(0, 0, 153);">)</span>