このウェブサイトのタブのアイデアが気に入っています: http://www.usatoday.com/
ロゴの下をスクロールすると、1- タブが固定されます。2- 小さいロゴがタブに入ります。
または、Google プラス タブに似たものと言えます。どうすればこれを行うことができますか.. * 私はデータベース開発者であり、Web 技術のバックグラウンドしかありません。
手伝ってくれてありがとう。よろしく、
このウェブサイトのタブのアイデアが気に入っています: http://www.usatoday.com/
ロゴの下をスクロールすると、1- タブが固定されます。2- 小さいロゴがタブに入ります。
または、Google プラス タブに似たものと言えます。どうすればこれを行うことができますか.. * 私はデータベース開発者であり、Web 技術のバックグラウンドしかありません。
手伝ってくれてありがとう。よろしく、
デスクトップでは、これは難しくありません。
var navigationIsFixed = false;
var $navigation = $("#navigation");
var headerHeight = $("#my-header").height() //To find the height of the header element
$("body").on('scroll', function(e)) { //Fires continuously while the user scrolls
if ($("body").scrollTop >= headerHeight && !navigationIsFixed) {
$navigation.css({
position: "fixed",
left: 0,
right: 0,
top: 0
});
$("#logo").stop(); //Make sure to stop any possible ongoing animations
$("#logo").doCoolAnimation();
navigationIsFixed = true;
} else if (navigationIsFixed) {
$navigation.css( {position: "static"} );
$("#logo").stop();
$("#logo").doCoolRevertAnimation();
navigationIsFixed = false;
}
}
モバイル デバイスでは、わずかに 1 バイト難しくなります。イベントをスクロールすると思われるように本文が応答しないため、ヘッダーを残りのコンテンツから 2 つの異なる div に分ける必要があります。
このアプローチを使用する場合は、スクロール イベントをコンテンツ div にバインドする必要があります。
<div id="header">
//Your header code, including the navigation
</div>
<div id="main-content-wrapper">
//Everything else
</div>
CSS:
#main-content-wrapper {
overflow-y: scroll;
-webkit-overflow-scrolling: touch; //Enables inertia scroll on webkit mobile browsers
}
お役に立てば幸いです:)