これは私の反応 js コードです
import React, { useState, useEffect } from "react";
「../images/logo.png」からロゴをインポートします。
import { Link } from "react-scroll";
「jquery」から $ をインポートします。
import "./Navbar.css";
関数 Navbar() {
const [scroll, setScroll] = useState(0);
useEffect(() => {
document.addEventListener("スクロール", () => {
const scrollValue = document.documentElement.scrollTop;
if (scrollValue > 100) {
const navbar = document.querySelector(".navbar_menu_heade");
navbar.classList.add("表示");
} そうしないと {
const navbar = document.querySelector(".navbar_menu_heade");
navbar.classList.remove("表示");
}
});
});
関数アニメーション() {
var tabsNewAnim = $("#navbarSupportedContent ");
var activeItemNewAnim = tabsNewAnim.find(" .active");
var activeWidthNewAnimHeight = activeItemNewAnim.innerHeight();
var activeWidthNewAnimWidth = activeItemNewAnim.innerWidth();
var itemPosNewAnimTop = activeItemNewAnim.position();
var itemPosNewAnimLeft = activeItemNewAnim.position();
$(".hori-selector").css({
上: itemPosNewAnimTop.top + "px",
左: itemPosNewAnimLeft.left + "px",
高さ: activeWidthNewAnimHeight + "px",
幅: activeWidthNewAnimWidth + "px",
});
$("#navbarSupportedContent").on("scroll", "li", function (e) {
$("#navbarSupportedContent ul li ").removeClass("active");
$(this).addClass("アクティブ");
var activeWidthNewAnimHeight = $(this).innerHeight();
var activeWidthNewAnimWidth = $(this).innerWidth();
var itemPosNewAnimTop = $(this).position();
var itemPosNewAnimLeft = $(this).position();
$(".hori-selector").css({
上: itemPosNewAnimTop.top + "px",
左: itemPosNewAnimLeft.left + "px",
高さ: activeWidthNewAnimHeight + "px",
幅: activeWidthNewAnimWidth + "px",
});
});}
useEffect(() => {
アニメーション（）;
$(window).on("サイズ変更", function () {
setTimeout(関数 () {
アニメーション（）;
}、500);
});
}、[]);
戻る （
);}
デフォルトの Navbar をエクスポートします。
このコードには、次の CSS を適用したナビゲーション バーがあります:
@import url("https://fonts.googleapis.com/css?family=Roboto");
体 {
font-family: "Roboto", sans-serif;
背景: #fff; /* 古いブラウザーのフォールバック */
}
* {
マージン: 0;
パディング: 0;
}
私 {
右マージン: 10px;
}
.navbar-ロゴ {
パディング: 0px;
色: #dfe2ff;
マージン右: 46px;
左マージン: 100px;
}
.logoimg{
最大幅: 75% !重要;
}
.fa-バー{
カラー: #5161ce;
}
.navbar-mainbg {
背景色: #dfe2ff;
パディング: 0px;
}
#navbarSupportedContent {
オーバーフロー: 非表示;
位置: スティッキー;
}
#navbarSupportedContent ul {
パディング: 0px;
マージン: 0px;
マージン左: 自動;
}
#navbarSupportedContent ul li a i {
右マージン: 10px;
}
#navbarSupportedContent li {
リスト スタイル タイプ: なし。
フロート: 左;
}
#navbarSupportedContent ul li a {
カラー: #5161ce;
テキスト装飾: なし;
フォントサイズ: 15px;
表示ブロック;
パディング: 20px 20px;
遷移期間: 0.6 秒;
遷移タイミング関数: キュービックベジエ (0.68, -0.55, 0.265, 1.55);
位置: 相対;
}
#navbarSupportedContent > ul > li.active > a {
カラー: #5161ce;
背景色: 透明;
トランジション: すべて 0.7 秒;
フォントの太さ: 800;
}
#navbarSupportedContent > ul > li > a.active {
カラー: #5161ce;
背景色: 透明;
トランジション: すべて 0.7 秒;
フォントの太さ: 800;
}
#navbarSupportedContent a:not(:only-child):after {
コンテンツ: "\f105";
位置: 絶対;
右: 20px;
上: 10px;
フォントサイズ: 14px;
font-family: "Font Awesome 5 Free";
表示: インラインブロック;
右パディング: 3px;
垂直整列: 中央;
フォントの太さ: 900;
遷移: 0.5 秒;
}
#navbarSupportedContent .active > a:not(:only-child):after {
変換: 回転 (90 度);
}
.堀セレクター {
表示: インラインブロック;
位置: 絶対;
高さ: 100%;
上: 0px;
左: 0px;
遷移期間: 0.6 秒;
遷移タイミング関数: キュービックベジエ (0.68, -0.55, 0.265, 1.55);
背景色: #fff;
ボーダー左上半径: 15px;
ボーダー右上半径: 15px;
マージントップ: 10px;
}
.hori-selector .right,
.hori-selector .left {
位置: 絶対;
幅: 25px;
高さ: 25px;
背景色: #fff;
下: 10px;
}
.hori-selector .right {
右: -25px;
}
.hori-selector .left {
左: -25px;
}
.hori-selector .right:before,
.hori-selector .left:before {
コンテンツ： "";
位置: 絶対;
幅: 50px;
高さ: 50px;
境界半径: 50%;
背景色: #dfe2ff;
}
.hori-selector .right:before {
下: 0;
右: -25px;
}
.hori-selector .left:before {
下: 0;
左: -25px;
}
@media (最大幅: 991px) {
#navbarSupportedContent ul li a {
パディング: 12px 30px;
}
.堀セレクター {
マージントップ: 0px;
左マージン: 10px;
境界半径: 0;
ボーダー左上半径: 25px;
ボーダー左下半径: 25px;
}
.hori-selector .left,
.hori-selector .right {
右: 10px;
}
.hori-selector .left {
上: -25px;
左: 自動;
}
.hori-selector .right {
下: -25px;
}
.hori-selector .left:before {
左: -25px;
上: -25px;
}
.hori-selector .right:before {
下: -25px;
左: -25px;
}
}
@media only screen and (max-width: 984px) {
.navbar-ロゴ {
パディング: 0px;
色: #dfe2ff;
マージン右: 46px;
左マージン: 10px;
マージントップ: 10px;
margin-bottom: 10px;
}
.logoimg{
最大幅: 75% !重要;
}
.navbar-nav{
margin-top: 15px !重要;
}
}
このコードで最初に起こることは、Onclick イベントを適用したナビゲーション バーがあるため、ナビゲーション バーのナビゲーションをクリックするたびにアクティブになりますが、それを追加するときにも追加したいと考えています。ページをスクロールすると、現在アクティブなアクティブなナビゲーション リンクが変更されます。
これを理解するのを手伝ってくれる人はいますか??
セクション名を状態に保存し、状態に保存されている名前と一致する場合にのみ、アクティブなスタイルを現在のセクションに適用できます。次に、親 div で onScroll ハンドラーを使用すると、setState を使用してスタイルを変更できます。
const [activeState, setActiveState] = React.useState('about')
次に、NavBar の親 div で onScroll ハンドラーを定義します
onScroll={(イベント) => {
const val = event.currentTarget.scrollTop
const maxVal = event.currentTarget.scrollHeight
if(val >= maxVal / 5) setActiveState('サービス')
else if(val >= 2 * (maxVal / 5)) setActiveState('キャリア')
そうでなければ setActiveState('about')
}}
私は 3 つのセクションしか実装していませんが、残りは管理できると確信しています。
注: この実装では、各セクションが親 div にあり、各セクションのビューポートの高さが 100% であることを前提としています。ただし、それが私がここでやろうとしていることなので、直感が得られることを願っています.