平滑地製作標題

Question

我正在嘗試製作類似於其中一個縮小尺寸的標題，並且在頁面開始向下滾動時有一個元素滑動條。不同之處在於，我見過的大多數類型的標題都有一個帶有背景色的大標題，而我的客戶希望徽標位於導航欄的單獨空間中。頂部有一個空白區域，只有標誌，然後是導航欄，它有一個背景色。所以我試圖讓導航條在滾動條的頂部粘住，並將徽標滑入不同的位置。我嘗試過動畫和轉換，但它仍然在滾動上非常刺耳。

下面是一些當前使用jQuery在滾動中添加css類的代碼，然後以不同的方式定位元素。我實際上使用sass並沒有將其改爲常規的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; 
} 

最新問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 相關問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.