4

垂直スクロールバーを使用してページの下部 (または下部から 200px) に到達した後、固定 div 要素の上部マージンを margin-top: 200px から margin top 0px に変更する必要があります。

スクロールして一番上に戻る場合は、戻るを切り替えます。

いくつかのjavascript/jQueryコードコードがそれを行うと思います。

私のhtml/レイアウトコード:

<div id="header" style="position: fixed; margin-top: 0px;">
     Header content
</div>
<div id="main">
    <div id="left" style="position: fixed; margin-top: 200px;">Google Ads here</div>
    <div id="right">Content posts here</div>
</div>
<div id="footer">
    Footer content
</div>

編集：私の質問をより明確にするためのいくつかの画像があります。

  1. ページをロードしたときの通常の状態: ここに画像の説明を入力

  2. 下にスクロールすると問題が発生し、Google 広告の列がフッターと競合します。 ここに画像の説明を入力

  3. どのように解決する必要があるか: ここに画像の説明を入力

4

8 に答える 8

2

ダーフダー...

ほら、私の提案した解決策：

http://jsfiddle.net/YL7Jc/2/

アニメーションは少しぎくしゃくしていますが、私はそれがあなたが望むことをすると思います

(これは、以前の s/o 投稿に対する私の見解です:
DIV を常に画面上に保持できますが、常に固定位置にあるとは限りませんか? )

どう考えているか教えてください！

于 2012-09-28T20:46:54.920 に答える
1

window.scrollイベントをバインドして、ページが下部 (200px の下部)に達し、#left上部 ( ) に移動するかどうかを確認する以下のコードを試してくださいmargin-top: 0。

デモ: http://jsfiddle.net/6Q6XY/4/ (いつ底を打ったかを確認するためのデモ コードを追加しました。)

$(function() {
    var $left = $('#left');

    $(window).bind('scroll', function() {   
        if (($(document).height() 
               - (window.pageYOffset + window.innerHeight)) < 200) {                
            $left.css('marginTop', 0);
        } else {
            $left.css('marginTop', 200);
        }
    });
});

参考： https ://stackoverflow.com/a/6148937/297641

于 2012-09-24T16:49:54.343 に答える
0

ウィンドウのスクロール機能を実装する必要があります。これは jquery の実装であるため、最新の jquery ライブラリが含まれていることを確認してください。

$(window).scroll(function () {
        if ($(window).scrollTop() + $(window).height() == $(document).height()) {

            //if it hits bottom
            $('#left').css("margin-top", "0px");

        }
        else {

            $('#left').css("margin-top", "200px");

        }
    });
于 2012-09-21T11:45:27.893 に答える
0

こんにちは まず、人々をマークする前に、そもそももっと明確にする必要がありました。誰もが同様の回答をすると、質問が明確ではなかったことを示しています。

潜在的な修正についてはJs Fiddleを参照してください。ピクセルなどで必要に応じて微調整してください。

于 2012-09-28T15:29:55.640 に答える
0

HTML

<div id="main" style="width: 960px; margin: 0px auto;"> 
    <div id="left" style="position: fixed; top: 200px; left: 0px; background: #000; width: 100%; color: #fff;">Google Ads here</div> 
    <div id="right"></div> 
</div>

ジャバスクリプト

<script type="text/javascript">
    $(function() {
        var documentHeight = $(document).height();
        var windowHeight = $(window).height();
        var left = $('#left');
        var leftTopPosition = $('#left').css('top');
        leftTopPosition = parseInt(leftTopPosition.substring(0, leftTopPosition.length-2));             

        $(window).scroll(function(){
            var pageOffsetY = window.pageYOffset;           
            if((documentHeight - pageOffsetY - windowHeight) <= 200 && leftTopPosition == 200) {
                left.stop().animate({
                    'top': '0px'
                });

                leftTopPosition = 0;
            }

            else if((documentHeight - pageOffsetY - windowHeight) > 200 && leftTopPosition == 0) {
                left.stop().animate({
                    'top': '200px'
                });

                leftTopPosition = 200;
            }
        });
    });

</script>
于 2012-09-26T07:47:21.763 に答える
-1

これを試して：

$(window).bind('scroll', function(){
   if(($(window).height()-$(window).scrollTop())<200)
   {
       $('#left').css('margin-top',$(window).scrollTop());
   }
   else
   {
       $('#left').css('margin-top',200);
   }
});
于 2012-09-21T11:54:02.920 に答える
-1

このような何かを試してみてください

      if ($(window).scrollTop() == $(document).height() - $(window).height())   
           {
              document.getElementById(yourid).setAttribute("style","margin-top:0px");
           }
于 2012-09-21T11:43:14.270 に答える