1

そのため、jqueryを使用してWebページのアニメーションフッターが必要でした。アニメーションをトリガーするボタンがあるはずです。私はこれらすべての良い例を見つけました、そしてすべてがうまくてダンディです。ボタン（フッターを含む）にこのコードが含まれていることを除いて、ページの下部ではなく、Webブラウザーの下部に固定されます。ページと一緒に「スクロール」するように[i]したくない[/i]、他のすべてのdivの下に配置したいのです。divコンテナ（他のすべてのdivも含まれています）に入れてみましたが、うまくいかないようです。

さて、（2.5時間のグーグルの後）CSSでの「絶対」ポジショニングと関係があるかもしれない/かもしれない/可能性があることがわかったので、フッターのコンテナーに相対位置を与える、または与えるなど、いくつかのことを切り替えてみましたそれは「オーバーフロー：隠された」です。残りと一緒に左フロートですが、何も私の問題を解決するようには見えませんでした。（私は何か間違ったことをした可能性がありますが、結局のところCSSではそれほど素晴らしいことではありません：-/）

誰かが助けてくれる/喜んで助けてくれることを願っています。

PSこれが私が使用した例です：http： //return-true.com/2010/04/jquery-pop-up-footer-version-2/

そしてここにコードがあります：

Javascript：

    jQuery(function($) {
        var open = false;
        $('#footerSlideButton').click(function () {
            if(open === false) {
                $('#footerSlideContent').animate({ height: '300px' });
                $(this).css('backgroundPosition', 'bottom left');
                open = true;
            } else {
                $('#footerSlideContent').animate({ height: '0px' });
                $(this).css('backgroundPosition', 'top left');
                open = false;
            }
        }); 
    });

HTML：

<div id="footerPlacement">
    <div id="footerSlideContainer">
        <div id="footerSlideButton"></div>
            <div id="footerSlideContent">
            <div id="footerSlideText">
                <h3>Hey! I'm a Sliding Footer</h3>
                    <p>What's a Sliding Footer? Well I'm a cool little element which can be hidden from view, and revealed when the user wants to see me.</p>
                    <p>What can you use me for? Well look at all this stuff:</p>
                    <ul>
                        <li>Sales information</li>
                        <li>Important updates</li>
                        <li>Unobtrusive about panel</li>
                        <li>Or just a good ol' footer</li>
                    </ul>
                    <p>There are obviously many other uses, but these are the few useful ones I can think of.</p>
            </div>
        </div>
    </div>
</div>

CSS：

#footerPlacement {
    margin-bottom: 0px;
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}
#footerSlideContainer {
    position: fixed;
    margin-left: 0px;
    bottom:0px;
    width: 1000px;
}
#footerSlideButton {
    background: url('../images/footer/footerbtn.png') top left no-repeat transparent;
    position: absolute;
    top: -55px;
    right: 20px;
    width:50px;
    height:50px;
    border: none;
    cursor: pointer;
}
#footerSlideContent {
    width: 100%;
    height: 10px;
    background: #251b15;
    color: #CCCCCC;
    font-size: 0.8em;
    border: none;
    font-family: DejaVuSansBook, Sans-Serif;
}
#footerSlideText {
    padding: 15px 10px 25px 25px;
}

前もって感謝します！

4

1 に答える 1

2

#footerPlacementを含めるように変更すると、position:relativeに変更でき、フッターはその上のコンテンツの下に配置されます。 #footerSlideContainerposition:absolute

ただし、フッターを正しく機能させるには、コンテンツの最小の高さを約350ピクセルにする必要があります。コンテンツの長さが十分でない場合、フッターはブラウザーの下部に表示されません。

にも追加overflow:hiddenしました#footerSlideContent。私はデモンストレーションのためにフィドルを作りました：

http://jsfiddle.net/tc6b8/

于 2013-02-28T09:34:35.073 に答える