Add border if navbar hovers on choosen element-CodePudding

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 trying to solve my problem and I don't know what to start with. I created a simple codepen to display my problem:
Codepen

So, I want to get my navbar to add black border, when it's over the "some content" element. Is there any soltion that can help me? Or I should just set it for example: 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 better way to do this?

CodePudding user response：

with react you can use the onm ouseEnter to check if the user hover on the element first we will have state to save that info

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

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

and update it while the user hover the element

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

then change the className depend on the state.



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

CodePudding user response：

You may want to compare background.getBoundingClientRect().top to navbar.getBoundingClientRect().bottom.
(If navbar is at the top of the document, you could also use navbar.offsetHeight.)

Here's how it might look with just vanilla 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>