0

小さな div をブラウザの右下隅に固定したい。これを行うことでこれを達成しました：

#div {
position: fixed;
bottom: 10px;
right: 10px;
}

しかし、高さ: 200px; などのフッターがあります。私が欲しいのは、ページを下にスクロールするとdivが右下隅にとどまるということですが、ページの下部にフッターがポップアップすると、フッターがそれを上に押し上げて前に出ないようにしたいのですフッター。

私は自分自身を明確にしたことを願っています...

4

2 に答える 2

1

少し時間がかかりましたが、答えが得られたと思います:)

css ファイルを追加する行の下に次の行を追加して、HTML に JQuery を追加する必要があります。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

次に、ファイル scrollBottom.js (javascript ファイル) を作成し、それも次のように追加します。

<script src="scrollBottom.js" type="text/javascript"></script>

そのファイルに次のコードを追加します (編集: document.ready を追加する必要があります)。

$(document).ready(function() {

    $(window).scroll(function() {
       if($(window).scrollTop() + $(window).height() > $(document).height()-200) {
           $('#div').css('bottom', $(window).scrollTop()-2360);
       }
        else
        {
            $('#div').css('bottom', '10px');
        }
    });​
});

作業例: http://jsfiddle.net/4VJtU/4/

于 2012-09-24T20:15:45.580 に答える
1

これが jscripting なしで実行できることを気に入っています。:) ほんの数行の CSS といくつかのラッパー調整: http://jsfiddle.net/bitofgrace/QGEUv/

<div id="wrapper">
<div id="flyover">hi</div> <!-- the content you want to stick in the corner -->
<div class="content"> Body of page content</div>

<div ID="footer"> FOOTER CONTENT</div>
</div> <!-- close wrapper -->

CSS

#wrapper {width:100%; height:100%; margin:0}
#flyover {background-color:pink; color:white; position:fixed; top: 87.5%; z-index:4;}
#footer {background:green; position:relative; height:100px; width:100%; bottom:0; z-index:1;}
于 2013-03-16T13:39:11.000 に答える