CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSを使用してスクロール上の固定ナビゲーションバーを作成するにはどうすればよいですか？

CSSのpositionプロパティを指定することで、CSSを使用して固定ナビゲーションバーを作成できます。

CSSのpositionプロパティの構文は次のとおりです-

Selector {
   position: /*value*/;
}

以下は、CSS位置プロパティの例です。

例

<!DOCTYPE html>
<html>
<head>
<style>
#navigation-bar {
   overflow: hidden;
   box-shadow: inset 0 0 20px green;
}
a {
   float: left;
   display: block;
   margin-left: 2%;
   padding: 2% 4%;
   text-align: center;
   color: black;
   text-decoration: none;
   font-size: 1.2em;
   border: 0.5px ridge red;
}
a:hover {
   box-shadow: inset 0 0 14px red;
   font-size: 1.6em;
}
.content {
   background-color: coral;
   padding: 16px;
}
.sticky {
   position: fixed;
   top: 0;
   width: 100%;
}
.sticky + .content {
   padding-top: 80px;
}
</style>
</head>
<body>
<div class="content"></div>
<div id="navigation-bar">
<a class="active" href="#">logo</a>
<a href="#">SignUp</a>
<a href="#">SignIn</a>
<a href="#">More</a>
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus ante quis odio rhoncus, sit amet porta nunc venenatis. Vivamus eu ex et risus vehicula semper eu eu elit. Aliquam tempor rutrum neque sit amet aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras non eros ex. Suspendisse placerat tincidunt tortor a semper. Etiam molestie justo ac sapien auctor maximus. Etiam ut ante sollicitudin, tempor mauris nec, malesuada purus. Nunc malesuada sem sed fermentum eleifend. Cras ultrices velit eu blandit lobortis.
</p>
<img src="https://images.unsplash.com/photo-1612305876291-
c369fea489b3?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=800&ixlib=rb1.2.1&q=80&w=600" />
</div>
<script>
let nav = document.getElementById("navigation-bar");
let sticky = nav.offsetTop;
window.onscroll = function() {sticker()};
function sticker() {
   if (window.pageYOffset >= sticky) {
      nav.classList.add("sticky")
   } else {
      nav.classList.remove("sticky");
   }
}
</script>
</body>
</html>

出力

これにより、次の結果が生成されます-

CSSを使用してスクロール上の固定ナビゲーションバーを作成するにはどうすればよいですか？

CSSを使用してスクロール上の固定ナビゲーションバーを作成するにはどうすればよいですか？


  1. CSSを使用して固定/スティッキーフッターを作成するにはどうすればよいですか？

    CSSで固定フッターを作成するためのコードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style>    body{       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

  2. CSSで矢印を作成するにはどうすればよいですか？

    CSSで矢印を作成するためのコードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;