Apply a border to the navbar when it hovers over a selected element

Question

Apply a border to the navbar when it hovers over a selected element

export const NavBar = () => {
  return <div className="navbar">this is navbar</div>;
};

const Content = () => {
  return ( 
    <div className="main">
      <div className="background">
        some content
      </div>
    </div>
  );
};

const App = () => {
  return (
    <>
      <NavBar/>
      <Content/>
    </>
  );
}

ReactDOM.render(<App/>,document.body);

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
}

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.navbar {
  width: 100%;
  height: 64px;
  background: red;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100000;
}

.main {
  height: 200vh;
  width: 100%;
  position: relative;
  background: blue;
}

.background {
  width: 100%;
  height: 200px;
  background: red;
  position: absolute;
  top: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

I'm having trouble finding a solution and don't know where to begin. Here's a simple codepen that showcases my issue:
Codepen

My objective is to have the navbar display a black border when it overlaps the "some content" section. Is there any solution that can assist me with this? Or should I simply set it like: When y scroll is between 247px and 453px change border. Something like this:

const [scroll, setScroll] = useState();
useEffect(() => {
    setScroll(window.pageYOffset)
}, [window.pageYOffset])

return <div style={{ borderBottom: `solid black ${(scroll >= 247 && scroll <= 453) && '2px'}` }}>navbar</div>

Is there a more efficient approach to achieving this?

javascript html css reactjs

Answer 1

Answer №1

When using React, you can utilize the onMouseEnter event to determine if the user is hovering over an element. First, we need to create a state to store this information.

const App = () => {
  const [isHover, setIsHover] = useState(false);

  return (
    <>
      <NavBar/>
      <Content/>
    </>
  );
}

We can then update the state based on whether the user is hovering over the element or not.

   <div className="main">
      <div className="background"
        onMouseEnter={() => setIsHover(true)}
        onMouseLeave={() => setIsHover(false)}>
        >
        some content
      </div>
    </div>

Next, we can change the className depending on the state.



export const NavBar = () => {
  return <div className={isHover? "navbar bordercss": "navbar"}>this is navbar</div>;
};

Answer 2

When using React, you can utilize the onMouseEnter event to determine if the user is hovering over an element. First, we need to create a state to store this information.

const App = () => {
  const [isHover, setIsHover] = useState(false);

  return (
    <>
      <NavBar/>
      <Content/>
    </>
  );
}

We can then update the state based on whether the user is hovering over the element or not.

   <div className="main">
      <div className="background"
        onMouseEnter={() => setIsHover(true)}
        onMouseLeave={() => setIsHover(false)}>
        >
        some content
      </div>
    </div>

Next, we can change the className depending on the state.



export const NavBar = () => {
  return <div className={isHover? "navbar bordercss": "navbar"}>this is navbar</div>;
};

Answer 3

Answer №2

If you want to make a comparison, consider checking the

background.getBoundingClientRect().top

against navbar.getBoundingClientRect().bottom
.
(Alternatively, if the navbar is positioned at the top of the page, you could use navbar.offsetHeight as well.)

Below is an example using pure JavaScript:

const
  navbar = document.getElementById('navbar'),
  background = document.getElementById('background');
window.addEventListener("scroll", toggleNavbarBorder);

function toggleNavbarBorder(){
  const method = (background.getBoundingClientRect().top <= navbar.offsetHeight)
    ? "add"
    : "remove";
  navbar.classList[method]("bordered");
}

body { margin: 0; }
#navbar { width: 300px; height: 40px; position: fixed; top: 0; left: 0; z-index: 1; background: red; }
#main { width: 300px; height: 120vh; position: relative; background: blue; }
#background { width: 300px; height: 60px; position: absolute; top: 60px; background: red; }
.bordered{ border-bottom: 2px solid black; }

<div id="navbar">navbar</div>
<div id="main">
  <div id="background">some content</div>
</div>

Answer 4

If you want to make a comparison, consider checking the

background.getBoundingClientRect().top

against navbar.getBoundingClientRect().bottom
.
(Alternatively, if the navbar is positioned at the top of the page, you could use navbar.offsetHeight as well.)

Below is an example using pure JavaScript:

const
  navbar = document.getElementById('navbar'),
  background = document.getElementById('background');
window.addEventListener("scroll", toggleNavbarBorder);

function toggleNavbarBorder(){
  const method = (background.getBoundingClientRect().top <= navbar.offsetHeight)
    ? "add"
    : "remove";
  navbar.classList[method]("bordered");
}

body { margin: 0; }
#navbar { width: 300px; height: 40px; position: fixed; top: 0; left: 0; z-index: 1; background: red; }
#main { width: 300px; height: 120vh; position: relative; background: blue; }
#background { width: 300px; height: 60px; position: absolute; top: 60px; background: red; }
.bordered{ border-bottom: 2px solid black; }

<div id="navbar">navbar</div>
<div id="main">
  <div id="background">some content</div>
</div>

Apply a border to the navbar when it hovers over a selected element

Answer №1

Answer №2

Similar questions

When the flex-grow property is set to 1, the height of the div extends beyond the space that

Can you explain the owlItem feature found in owl carousel?

Click here to access the identical page

What is the method for calling a function in a JavaScript file?

What is the best way to ensure jQuery loads before CSS code on a website

`Is it common to use defined variables from `.env` files in Next.js applications?`

The NgbTypeahead element is not able to scroll when placed within a scrollable container

Guide on converting JSON encoded data into a JavaScript array

In nextjs, the page scroll feature stops functioning properly following a redirection

How can I display and utilize the selected value from a Rails select form before submitting it?

Error: The localStorage object is not defined within the context of a Next.js application

Leveraging route configuration's scope in HTML

In my attempts to retrieve specific statistics from the PokeAPI using Axios and Node.js, I encountered an error

What is the most effective method to ensure this layout is functioning properly?

Changing the state variable leads to an endless rendering cycle

Is there a way to horizontally navigate a pallet using Next and Prev buttons?

Incorporate images into ReactJS Components without the need to save them locally as files

Do we need to use parseInt for the '*' operator in JavaScript?

Is your custom login form in Web2py not submitting properly?

What are the steps for creating a new npm package based on an existing one?