0

右のメニューのdiv要素がヘッダーメニューの下部に収まり、yスクロールして下部に移動し、固定されたままになるようにします。そして、上にyスクロールしている間、彼の前の要素との相対関係を維持します。

これを説明するのは簡単ではないので、以下を見てください：フィドル

HTML

<div id="main">
    <div id="menu">Fixed Menu</div>
    <div id="container">
        <div id="content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit....
        </div>
        <div id="right_menu">
            <div id="items">
                <!-- Variable number of items !-->
                &bull; Some items<br/>
                &bull; Some items<br/>
                &bull; Some items<br/>
                &bull; Some items 
            </div>
            <div id="fixed_items">
                <!-- Items to be fixed to top menu by scrolling !-->
                &bull; Fixed scroll items<br/>
                &bull; Fixed scroll items<br/>
                &bull; Fixed scroll items
                <input type="text" id="test"/>
            </div>
       </div>
    </div>
</div>

CSS

#main {
    position:relative;
    height:2000px;
    overflow-y:scroll;
    background:#EDEDED;}
#menu {
    position:fixed;
    z-index:10;
    width:100%;
    line-height:40px;
    background:#555555;
    color:#EDEDED;
    padding-left:10px;}
#container {
    display:table;
    width:100%;
    margin-top:40px;}
#content {
    display:table-cell;
    padding:10px;
    text-align:justify;}
#right_menu {
    display:table-cell;
    width:200px;}
#items, #fixed_items {
    position:relative;
    z-index:9;
    width:160px;
    padding:10px;
    border-bottom:4px solid #555555;
    background:#CCCCCC;}
input {width:100px;}

JS 

$(document).ready(function(){
    $(window).scroll(function(){fix_items();});
});
function fix_items()
{
    var windowPos=$(window).scrollTop(),
        bloc=$('#fixed_items'),
        blocPos=bloc.position(),
        newPos=windowPos-blocPos.top+40;
    if(newPos>0)
        bloc.css({'position':'fixed','top':'40px'});        
    else if (newPos<=0)
        bloc.css({'position':'relative','top':'0px'});
    $('#test').val(blocPos.top+'/'+windowPos);
}

ビギニングで、私はstop().animate({"come CSS"})イージングが本当に迷惑だったところでいくつかを使用していました...そしてanimate({'position':'fixed'})うまくいかないようです（クロムでテストされました）。

それなし ：

else if (newPos<=0)
        bloc.css({'position':'relative','top':'0px'});

それは魅力のように機能しますが、問題はここにあり、解決策を見つけることができ#fixed_itemない#items.と思います。

この醜い効果なしで仕事をするためのアイデアはありますか？

4

2 に答える 2

2

スクロールが固定されている要素よりも、前の要素の位置をテストする方が適切です（要素の固定位置がジャンプしているように見えるため...）。

以下を使用すると、醜い効果が1回だけ発生します。

function fix_items()
{
    var windowPos=$(window).scrollTop(),
        bloc=$('#fixed_items'),
        prev=$('#items'),
        prevPos=prev.position(),
        header=$('#menu'),
        newPos=windowPos - (prevPos.top + prev.height() - 16);
    if(newPos>=0)
        bloc.css({'position':'fixed','top':'40px'});        
    else if (newPos<0)
        bloc.css({'position':'relative','top':'0px'});
}

フィドル

于 2013-02-10T01:56:59.857 に答える
0

ロジックにチェックを追加して、スクロールごとにcssの変更が実行されないようにする必要があります。

$(document).ready(function(){
  $(window).scroll(function(){fix_items();});
});
function fix_items()
{
    var windowPos=$(window).scrollTop(),
        bloc=$('#fixed_items'),
        blocPos=bloc.position(),
        newPos=windowPos-blocPos.top+40,
        isFixed = false;
    if( !isFixed && newPos>0)
        bloc.css({'position':'fixed','top':'40px'});        
    else if (isFixed && newPos<=0)
        bloc.css({'position':'relative','top':'0px'});
    $('#test').val(blocPos.top+'/'+windowPos);
}
于 2013-02-09T19:53:41.017 に答える