1
私は、サイズが小さくなり、ページがスクロールダウンしたときに要素のスライドを持つヘッダーのようなものを作成しようとしています。違いは、私が見たヘッダーの種類の大部分には、背景色が付いた大きなヘッダーが1つあり、クライアントはロゴをnav-barとは別のスペースに置くことを望んでいるということです。上部にはロゴだけの空白があり、背景色のあるナビゲーションバーがあります。だから、私はスクロールの上部にスティックをスティックし、ロゴを別の位置にスライドさせようとしています。私はアニメーションやトランジションを試みましたが、スクロールではまだまだ苦しいです。ヘッダーのスムーズなアニメーション
ここでは、jQueryを使用してスクロールにCSSクラスを追加し、要素の配置を変更したコードを示します。私は実際に嫌なことを使用していて、それを通常のCSSに変更していません。
HTML：
<header>
<a href="index.php"><img src="images/logo.png" width="170" height="68" /></a>
<nav>
<ol>
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="gallery.php">Gallery</a></li>
</ol>
</nav>
</header>
JS：
$(window).scroll(function() {
if ($(this).scrollTop() > 80){
$('nav').addClass("scroll");
$('header img').addClass("logoScroll");
}
else{
$('nav').removeClass("scroll");
$('header img').removeClass("logoScroll");
}
});
SASS：ヘッダと画像/ロゴの円滑な移行のために
header{
width: 100%;
img{
margin-left:68%;
}}
nav{
padding:5px;
z-index:2;
background:#571189;
font-size:1.3em;
}
.scroll {
position:fixed;
top:0;
width:100%;
}
.logoScroll{
position:fixed;
top:0;
right:4%;
z-index:3;
zoom:0.6;
transition: all 0.4s ease;
}
あなたのコードは正常に動作しています。 jqueryプラグインを追加して、あなたの '