0

私はこれまでここで非常に迅速かつ適切なヘルプを提供してきたので、別のクエリで戻ってくると思いました.

私はこれが好きです：http://jsfiddle.net/Tgm6Y/4624/

    var windw = this;

$.fn.followTo = function ( elem ) {
    var $this = this,
        $window = $(windw),
        $bumper = $(elem),
        bumperPos = $bumper.offset().top,
        thisHeight = $this.outerHeight(),
        setPosition = function(){
            if ($window.scrollTop() > (bumperPos - thisHeight)) {
                $this.css({
                    position: 'absolute',
                    top: (bumperPos - thisHeight)
                });
            } else {
                $this.css({
                    position: 'fixed',
                    top: 0
                });
            }
        };
    $window.resize(function()
    {
        bumperPos = pos.offset().top;
        thisHeight = $this.outerHeight();
        setPosition();
    });
    $window.scroll(setPosition);
    setPosition();
};

$('#one').followTo('#two');

MicronXD によって提供されます。

その上部が画面の上部に達するまでスクロールし、その下のdivの上部、私の場合はドキュメントのフッターに達するまでそこに固定されるdivを探しています。

親 div には指定された高さはありませんが、ページのコンテンツによって決定されます。

これが他の場所で回答されている場合は申し訳ありませんが、私の検索では、私が求めているものに完全に適合するものは見つかりませんでした.

よろしくお願いします。

マーク

以下の Matmarbon の jsfiddle で提案されているコードを追加し、彼のコメントで指定されたコードでラップしました。悲しいことに、私が達成できたのは、子要素が実際に固定されたままであり、その上部が画面の上部に当たったときだけですが、停止するはずの下部の div に出会ったときだけです。そして重ねます。

私は明らかにもっと助けが欲しいのですが、それを得るために何をすべきかわかりません. これを達成しようとしているページにリダイレクトする必要があります。それが役立つ場合は、http://piciscan.co.uk/experiment/slide-scanning-serviceです。

私はかなり途方に暮れており、さらに助けていただければ幸いです。前もって感謝します。

マーク

[2013-05-17 10:09:53 編集]

右！！！並べ替えました!!! 上記のページには、スライドをスキャンするためのさまざまなオプションを顧客に示すタブ付きのナビゲーションがあります。これはjsで実行され、必要です

<body onload="init()">

それが機能するために。そのコードを削除すると、スクロール div が希望どおりに機能します。悲しいことに、タブ ナビゲーションの機能が削除されます。しかし、私は、'onload' 機能を必要としないタブ付きナビゲーションを作成する別の方法を見つけました。

誰かが興味を持っている場合は、次のようになります。

まず、ヘッドに配置された JavaScript:

<script type="text/javascript">

var previoustab=""

function showMe(cid){
if (document.getElementById){
if (previoustab!="")
document.getElementById(previoustab).style.display="none"
document.getElementById(cid).style.display="block"
previoustab=cid
return false
}
else
return true
}


function loadForm(){
showMe("page1")
}

if (window.addEventListener)
window.addEventListener("load", loadForm, false)
else if (window.attachEvent)
window.attachEvent("onload", loadForm)
else if (document.getElementById)
window.onload=loadForm

</script>

今html：

<ul id="tabs">

    <li><a href="#firstinfo" onClick="return showMe('page1')" class="selected">
First Info</a></li>
    <li><a href="#secondinfo" onClick="return showMe('page2')">
Second Info</a></li>
    <li><a href="#thirdinfo" onClick="return showMe('page3')">
Third Info</a></li>

</ul>    

<div id="tabwrapper">

    <div id="page1" class="content">

    <h2>Here's some information</h2>

    blah<br>blah<br>blah

    </div>

    <div id="page2" class="content">

    <h2>Here's some more information</h2>

    blah<br>blah<br>blah

    </div>

    <div id="page3" class="content">

    <h2>And some MORE information</h2>

    blah<br>blah<br>blah

    </div>

    </div>

付随する css:

ul#tabs         {list-style: none;
            margin: 30px 0 0 0;
            padding: 0 0 3px 0;}

ul#tabs li      {display: inline;}

ul#tabs li a        {color: #42454a;
            background-color: #dedbde;
            border: 0;
            padding: 0.3em;}

ul#tabs li a:hover  {background-color: #f1f0ee;}

ul#tabs li a.selected   {color: #000;
            background-color: #f1f0ee;
            font-weight: bold;
            padding: 0.7em 0.3em 0.38em 0.3em;}

#tabwrapper     {border: 0;
            padding: 0.5em;
            background-color: #f1f0ee;}

.content        {display: none;}

そして最後に、jQuery:

<script type="text/javascript">

$(document).ready( function()
{
    $("a").click( function()
    {
        $(".selected").removeClass("selected");
        $(this).addClass("selected");
    } );
});

</script>

うまくいけば、それは誰かを助けるでしょう。

4

2 に答える 2

1

このように（jsfiddle）？

...
        bumperPos = $bumper.offset().top,
        startingPos = $this.offset().top,
        defaultPosType = $this.css('position'),
        thisHeight = $this.outerHeight(),
        setPosition = function(){
            if ($window.scrollTop() > (bumperPos - thisHeight - startingPos)) {
                $this.css({
                    position: 'absolute',
                    top: (bumperPos - thisHeight - startingPos)
                });
            } else if ($window.scrollTop() < (startingPos)) {
                $this.css({
                    position: defaultPosType,
                    top: startingPos
                });
            } else {
                $this.css({
                    position: 'fixed',
                    top: 0
                });
            }
        };
    ...

...

#zero {
    width:100%;
    height: 200px;
    background-color: yellow;
}

#one {
    width:100%;    
    height: 200px;
    background-color: aqua;
}

...

...
    <div id="zero">CONTENT ABOVE</div>
...
于 2013-05-14T21:34:01.067 に答える