Question 306352 in Html Question posted in
Some basic documentation can be found here.

Html – Make nav-bar disappear at a section

I have a div called key-features and a header/naviagtion bar at the top. I want this navigation bar to disappear when the user is on the key-features section and then return back after the leave. This key-features section is also on a horizontal scrolling.

I have been searching for javascript codes that detect if the user is in a specific section or not but i couln’t find any. Pls help

Tags:

2

Answers


  1. 0

    You can use the onmouseenter and onmouseleave event attributes in HTML to call JavaScript code which selects an element from the DOM and adds a style to hide it.

    HTML:

    <div id"my-nav-bar">
    ...
</div>

...

<div
  id="my-div"
  onmouseenter="hideNavBar()" 
  onmouseleave="showNavBar()"
>
    ...
</div>

    JavaScript:

    function hideNavBar() {
    document.getElementById("my-nav-bar").style.display = "none";
}

function showNavBar() {
    document.getElementById("my-nav-bar").style.display = "block";
}
    Login or Signup to reply.
  2. 0

    you can use JavaScript to detect the scroll position and toggle the visibility of the navigation bar based on whether the user is in the "key-features" section

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
    }

    header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: #333;
      color: #fff;
      padding: 10px;
      display: block;
      transition: top 0.3s;
    }

    #key-features {
      width: 300%;
      white-space: nowrap;
      overflow-x: scroll;
      scroll-snap-type: x mandatory;
    }

    .feature-section {
      display: inline-block;
      width: 100%;
      scroll-snap-align: start;
    }

    /* Add some styling for demonstration purposes */
    section {
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
    }
  </style>
</head>
<body>

<header id="navbar">
  <nav>
    <!-- Your navigation bar content goes here -->
    <a href="#section1">Section 1</a>
    <a href="#section2">Section 2</a>
    <a href="#key-features">Key Features</a>
    <a href="#section3">Section 3</a>
  </nav>
</header>

<div id="key-features">
  <div class="feature-section" id="section1">
    <section>Section 1</section>
  </div>
  <div class="feature-section" id="section2">
    <section>Section 2</section>
  </div>
  <div class="feature-section">
    <section>Key Feature 1</section>
  </div>
  <div class="feature-section">
    <section>Key Feature 2</section>
  </div>
  <!-- Add more key feature sections as needed -->
  <div class="feature-section" id="section3">
    <section>Section 3</section>
  </div>
</div>

<script>
  const navbar = document.getElementById('navbar');
  const keyFeatures = document.getElementById('key-features');

  window.addEventListener('scroll', () => {
    const scrollPosition = window.scrollX || window.pageXOffset;
    const keyFeaturesRect = keyFeatures.getBoundingClientRect();

    if (scrollPosition >= keyFeaturesRect.left && scrollPosition <= keyFeaturesRect.right) {
      navbar.style.top = `-${navbar.offsetHeight}px`;
    } else {
      navbar.style.top = '0';
    }
  });
</script>

</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search