0

ページと共に「スクロール」するようにテーブルの位置を固定することはできますが、特定の値の後のみですか?

私が達成しようとしているのは、このサイトのヘッダーに似ています: http://tf2trends.com/ ([すべて表示] をクリックしてから下にスクロールします)

4

4 に答える 4

1

これは、あらゆるタイプの要素で JavaScript と CSS を使用して実行できます。

画面を下にスクロールすると、div が画面の上部にくっつく

http://css-tricks.com/snippets/jquery/persistant-headers-on-tables/

于 2012-06-21T04:14:07.563 に答える
0

はい、CSS クラスと jQuery または JavaScript プログラミングを使用することで、この機能を簡単に実現できます。

jQueryで簡単に取得できる特定のスクロール値で関数を呼び出す必要があり、呼び出されるテーブルまたはdivのCSSを変更しますposition:fixed;top:0;

于 2012-06-21T04:15:01.820 に答える
0

これを試して：

//keep element in view
(function($)
{
    $(document).ready( function()
    {
        var elementPosTop = $('#floatguy').position().top;
        $(window).scroll(function()
        {
            var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();
            //if top of element is in view
            if (wintop > elementPosTop)
            {
                //always in view
                $('#floatguy').css({ "position":"fixed", "top":"10px" });
            }
            else
            {
                //reset back to normal viewing
                $('#floatguy').css({ "position":"inherit" });
            }
        });
    });
})(jQuery);​

html:

<div>
    Content before floating text<br/>
    Content before floating text<br/>
    Content before floating text<br/>
</div>
<div id="floatguy">
    <span>Floating Header</span>
</div>

<div id="longguy">
        Other text <br/>
        Other text <br/>
        Other text <br/>
</div>

jsFiddle の例

于 2012-06-21T04:17:24.423 に答える
0

これは、質問で参照されているWebサイトで使用されている方法で、フレームワークを使用せずに実装されています（何が起こっているのかを説明しようとする過度のコメント付き）. これは、効果を得るための最良/最も簡単/最も簡単な方法ではありませんが、学習の観点から、純粋な js でのその Web サイトのアプローチを確認するのに役立つことを願っています。(Mac 上の Chrome 19.0 と Firefox 13.0 でのみテストされています。)

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
    <title>Table With Scrolling Head</title>
    <style type='text/css'>
      #scrollTable{
      margin-top:100px; /* not necessary for scrolling, just to give a little padding */
      }

      #scroller {
      z-index: 100; /* this number needs to be larger than any other z-index on the page */
      }
    </style>
  </head>
  <body>
    <table id='scrollTable'>
      <thead id='scroller'>
    <tr>
      <th>I don't leave the screen</th>
    </tr>
      </thead>
      <tbody>
    <tr><td>I do!</td></tr>
    <tr><td>I do!</td></tr>
    <!-- ... add more <tr><td>I do!</td></tr> lines to make the page long enough to scroll -->
    <tr><td>I do!</td></tr> 
      </tbody>
  </body>
<script type='text/javascript'>
function getDistFromTop(e){
    /* get the offset of element e from the top (including the offset of any elements it is nested in)*/
    y = e.offsetTop;
    e = e.offsetParent;
    while (e != null){
        y = y + e.offsetTop;
        e = e.offsetParent;            
    }
    return y;
}

function scroll() {
    var scroller = document.getElementById('scroller');
    var tab = document.getElementById('scrollTable');

    if (window.pageYOffset > getDistFromTop(tab)){ /* if the page has been scrolled farther than the distance the table is from the top... */
        scroller.style.position = 'fixed'; /* fix the position of scroller so it doesn't move with the page */
        scroller.style.top = '0px'; /* put scroller on the top of the page */
        tab.style.paddingTop = '20px'; /* add padding to the top of the table; this is done to make the table body stay where it is expected (otherwise it would move because scroller, the table header, has become fixed) */
    } else { /* if the page scrolls back so that the whole table is on the page, reset everything to their original values so the page behaves "normally" */
        scroller.style.position = 'relative'; 
        scroller.style.top = '';
        tab.style.paddingTop = '0px';
    }
}

window.onscroll = scroll;
</script>
</html>
于 2012-06-21T05:30:50.050 に答える