1

ページの中央にテーブルのヘッダーがありますが、ページが大きいので、ページを下にスクロールしながら、ヘッダーをブラウザーの上部に固定したいと思います...

だから私の質問は：ユーザーが下にスクロールしてヘッダーの上部の境界線がブラウザの境界線に触れるまで、ヘッダーを通常に設定するにはどうすればよいですか？ユーザーがどれだけ下にスクロールしても、ヘッダーはその位置に固定されたままになりますか？

4

7 に答える 7

6

これをどのように行うことができるかについて説明させてください。

手順

  1. テーブルヘッダーを見つけて保存しますposition
  2. ウィンドウのscrollイベントにリスナーを追加します。
  3. ウィンドウのスクロールをテーブルヘッダーの位置と照合します
    1. 位置<ウィンドウスクロールの場合-テーブルヘッダーを修正するクラスを追加します
    2. それ以外の場合は、cssをリセットして通常のヘッダーのように動作させます。

ここにあるフィドルを投稿しました。

コードサンプル

HTML

<div class='lots_of_stuff_in_here'> ... </div>
<table>
    <thead id='my_fixable_table_header'>
        <tr>
            <th>My awsesome header number 1</th>
            <th>My awsesome header number 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        // much more content
    </tbody>
</table>

Javascript

// Just so you get the idea behind the code

var myHeader = $('#my_fixable_table_header');
myHeader.data( 'position', myHeader.position() );
$(window).scroll(function(){
    var hPos = myHeader.data('position'), scroll = getScroll();
    if ( hPos.top < scroll.top ){
        myHeader.addClass('fixed');
    }
    else {
        myHeader.removeClass('fixed');
    }
});

function getScroll () {
    var b = document.body;
    var e = document.documentElement;
    return {
        left: parseFloat( window.pageXOffset || b.scrollLeft || e.scrollLeft ),
        top: parseFloat( window.pageYOffset || b.scrollTop || e.scrollTop )
    };
}

</ p>

于 2012-12-10T05:51:42.563 に答える
2

スクロールしながらページを下に移動する、水平方向の「スティッキーボックス」を探しています。

サイドバーにこの効果を作成する方法を説明するウォークスルーは次のとおりです。http：//css-tricks.com/scrollfollow-sidebar/

ページの幅にまたがる一般的な例で動作するようにコードを変更しました。

HTML：

<div class="wrapper">
  <div class="head">HEAD</div>
  <div class="header">Table Header</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>​

CSS：

.wrapper {
  border:1px solid red;
}
.head{
  height: 100px;
  background: gray;
}
.header {
  background:red;
  height:100px;
  left:0;
  right:0;
  top:0px;
  margin-top:100px;
  position:absolute;
}

.content {
   background:green;
   height:1000px;
}

.footer {
   background:blue;
   height:100px;
}

jQuery：

$(function() {

    var $sidebar = $(".header"),
        $window = $(window),
        offset = $sidebar.offset(),
        topPadding = 0;

    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                top: $window.scrollTop() - offset.top + topPadding
            });
        } else {
            $sidebar.stop().animate({
                top: 0
            });
        }
    });

});​

これにより、元の表示位置を超えてスクロールすると、ヘッダーブロックがアニメーション化されて表示されます。

ここにjsFiddle

于 2012-12-10T05:17:18.427 に答える
0

ヘッダーの下の下部の要素を1つのdivで囲み、そのdivにクラスを追加してオーバーフローを自動に設定することができます

于 2012-12-10T05:10:57.037 に答える
0

私はあなたがこのヘッダー修正デモのように見えることを願っています

HTML

<div class="wrapper">
<div class="header">Header Fix</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</div>

CSS

.wrapper {
  border:1px solid red;
}

.header {
  background:red;
  height:100px;
  position:fixed;
  left:0;
  right:0;
  top:0;

}

.content {
   background:green;
   height:1000px;
}

.footer {
   background:blue;
   height:100px;
}
于 2012-12-10T05:21:28.280 に答える
0

ブロック要素の位置を固定するには、スタイルのdisplay属性でabsoluteプロパティまたはfixedプロパティを使用する必要がありますが、十分なスペースを確保して上部の要素を分割することを忘れないでください。そうしないと、ヘッダーセクションの下に配置されます。

于 2013-10-04T11:45:14.030 に答える
0 
$(window).scroll(function() {
 if ($(this).scrollTop() > 100){  
    $('header').addClass("sticky");
  }
  else{
    $('header').removeClass("sticky");
  }
});

css：

header.sticky {
  font-size: 24px;
  line-height: 48px;
  height: 48px;
  background: #efc47D;
  text-align: left;
  padding-left: 20px;
}
于 2016-03-02T11:19:14.993 に答える
0

これは、固定ヘッダー、フッター、および列を使用した完全に機能するバージョンです。

位置相対のクラスを適用します。そうしないと、固定列がヘッダーとフッターに重なり、必要に応じてテーブルレベルでクラスを定義します： "sticky-table"（必須）、 "sticky-header"、 "sticky-列」、「スティッキーフッター」、関数「applyStickyHeaders」を呼び出すよりも。それで全部です！

$(function(){
    applyStickyHeaders();
});

完全な例：

https://jsfiddle.net/pintilies/6zLyxewg/4/

IE、FireFox、Chromeでテスト済み。

于 2019-10-10T09:09:11.600 に答える