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

Adjust the sliders according to the current time

What are the differences in using ng-controller versus data-ng-controller?

Using the Object.assign technique will modify the original object's properties in JavaScript

Node.js can provide a reusable email framework that can be used across

Arrange documents according to the final two characters

Discovering instructions on locating Material UI component documentation

When a number is added to an array containing strings, the result is a string rather than a number

I'm encountering an issue with the dropify plugin where the data-allowed-file-

Error: The property 'querySelector' cannot be read because it is null

Stop procrastinating and take action before the JavaScript function concludes

AngularJS is experiencing delays when processing subsequent $http delete requests, leaving them stuck in a

What information is transferred when the submit button on a form is clicked?

"What could be the reason for web3.eth.getAccounts() method returning an empty array when used with console.log

Implemented an HTML hyperlink element precisely positioned

Re-rendering components using arrow functions

What is the best way to prevent caching of pages that are using a local JSON file in Next.js static generation?

Looking to make a custom loaded dice using 3D physics? Considering using the Cannon physics engine, but open to any other physics engine examples as well

Choose not to alter the display value during keyup and keydown events, while still triggering the change event

Unable to retrieve image: status code 402 - payment required

What steps should I take to host my Vue js single page application on my Django server?