The sticky element should only be active when the visible section is overflowing vertically. There should be no scrollbar if the height is minimal

Question

The sticky element should only be active when the visible section is overflowing vertically. There should be no scrollbar if the height is minimal

I'm currently working on a Whatsapp-style navigation bar and facing an issue with the sticky navbar functionality.

https://i.stack.imgur.com/Cy3lA.gif

Please refer to the details below for more information.

To resolve this issue, I have included a function that checks the height of each section within the container. If the content height exceeds a certain threshold, the scrollbar will be enabled. This ensures that only sections with lengthy text display the scrollbar while maintaining the sticky behavior of the navbar.

Furthermore, to address this challenge in the presence of page transitions, I have implemented additional logic to dynamically manage the scrolling behavior based on the active page index.

If you encounter any issues, please let me know.

javascript html css

Answer 1

Answer №1

One way to take elements out of the flow in a document is by using position: absolute.

let navItems = document.querySelectorAll(".nav-item");
const sections = Array.from(document.querySelectorAll("#container > section"));

sections.forEach((section, index) => section.style.setProperty("--section", index));

// Adding a CSS variable that counts how many items there are, influencing the logic.
document.body.style.setProperty("--total-nav-items", `${navItems.length}`);

navItems.forEach((item, index) => {
  item.addEventListener("click", () => {
    // Altering a CSS variable triggers further CSS logic
    document.body.style.setProperty("--index", `${index}`);
    toggleActive();

    function toggleActive() {
      // Reducing opacity for other unclicked icons
      navItems.forEach((itemWithClass) => {
        itemWithClass.classList.remove("active");
      });

      sections.forEach((section, sectionIndex) => section.classList.toggle("active", sectionIndex === index))

      // Making the clicked item visible
      item.classList.add("active");
    }
  });
});

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap");
:root {
  --nav-height: 3rem;
  --nav-bg: rgb(0, 128, 105);
  --text-color: white;
  --anim-speed: 0.5s;
  color-scheme: light dark;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

header {
  background-color: var(--nav-bg);
  height: var(--nav-height);
  display: grid;
  place-items: center start;
}

nav {
  display: flex;
  height: var(--nav-height);
  background-color: var(--nav-bg);
  color: var(--text-color);
  text-transform: uppercase;
  font-family: poppins;
  user-select: none;
  /* position: fixed; */
  /* top: 0; */
  /* left: 0; */
  position: sticky;
  top: 0;
  width: 100vw;
  z-index: 1;
}
... [truncated for brevity] ...

<header>
  <span>Whatsapp</span>
</header>

<nav>
  <div class="nav-item active">hello 1</div>
  <div class="nav-item">hello 2</div>
  <div class="nav-item">hello 3</div>
  <div class="nav-item">hello 4</div>
  <div class="nav-item">hello 5</div>
</nav>

<div id="container">
  <!-- Inserted HTML Sections Here -->

Answer 2

One way to take elements out of the flow in a document is by using position: absolute.

let navItems = document.querySelectorAll(".nav-item");
const sections = Array.from(document.querySelectorAll("#container > section"));

sections.forEach((section, index) => section.style.setProperty("--section", index));

// Adding a CSS variable that counts how many items there are, influencing the logic.
document.body.style.setProperty("--total-nav-items", `${navItems.length}`);

navItems.forEach((item, index) => {
  item.addEventListener("click", () => {
    // Altering a CSS variable triggers further CSS logic
    document.body.style.setProperty("--index", `${index}`);
    toggleActive();

    function toggleActive() {
      // Reducing opacity for other unclicked icons
      navItems.forEach((itemWithClass) => {
        itemWithClass.classList.remove("active");
      });

      sections.forEach((section, sectionIndex) => section.classList.toggle("active", sectionIndex === index))

      // Making the clicked item visible
      item.classList.add("active");
    }
  });
});

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap");
:root {
  --nav-height: 3rem;
  --nav-bg: rgb(0, 128, 105);
  --text-color: white;
  --anim-speed: 0.5s;
  color-scheme: light dark;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

header {
  background-color: var(--nav-bg);
  height: var(--nav-height);
  display: grid;
  place-items: center start;
}

nav {
  display: flex;
  height: var(--nav-height);
  background-color: var(--nav-bg);
  color: var(--text-color);
  text-transform: uppercase;
  font-family: poppins;
  user-select: none;
  /* position: fixed; */
  /* top: 0; */
  /* left: 0; */
  position: sticky;
  top: 0;
  width: 100vw;
  z-index: 1;
}
... [truncated for brevity] ...

<header>
  <span>Whatsapp</span>
</header>

<nav>
  <div class="nav-item active">hello 1</div>
  <div class="nav-item">hello 2</div>
  <div class="nav-item">hello 3</div>
  <div class="nav-item">hello 4</div>
  <div class="nav-item">hello 5</div>
</nav>

<div id="container">
  <!-- Inserted HTML Sections Here -->

Answer 3

Answer №2

To achieve the desired effect for your code, I made some changes to your snippet. Instead of using CSS variables to adjust content visibility on different areas of the screen, I created two states for your sections:

Active (Flexbox)
Inactive (Invisible)

By switching from a grid display to using flexbox on the sections, scrolling behavior is now possible. I also added a fixed max height on active sections and responsive bottom padding for user-friendliness. Feel free to customize these aspects as needed.

If you need further explanation or assistance, please let me know!

let navItems = document.querySelectorAll(".nav-item");
let sections = Array.from(document.getElementById("container").children);

//Initially make all other sections inactive except the first
sections.forEach((section, index) => {
  if(index == 0) section.classList.add("active-section");
  else section.classList.add("inactive-section");
});

navItems.forEach((item, index) => {
  item.addEventListener("click", () => {

    toggleActive(index);

    function toggleActive(index) {
      // for setting opacity low to other not clicked icons
      navItems.forEach(itemWithClass => {
        itemWithClass.classList.remove("active");
      });
      
      //Make sections visible or invisible based on nav item clicked
      sections.forEach((section, i) => {
        if(i != index) {
          section.classList.remove("active-section");
          section.classList.add("inactive-section");
        } else {
        section.classList.remove("inactive-section");
          section.classList.add("active-section");
        }
      });

      // making visible the active clicked item
      item.classList.add("active");
    }
  });
});

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap");
:root {
  --nav-height: 3rem;
  --nav-bg: rgb(0, 128, 105);
  --text-color: white;
  --anim-speed: 0.5s;
  color-scheme: light dark;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

header {
  background-color: var(--nav-bg);
  height: var(--nav-height);
  display: grid;
  place-items: center start;
}

nav {
  display: flex;
  height: var(--nav-height);
  background-color: var(--nav-bg);
  color: var(--text-color);
  text-transform: uppercase;
  font-family: poppins;
  user-select: none;
  /* position: fixed; */
  /* top: 0; */
  /* left: 0; */
  position: sticky;
  top: 0;
  width: 100vw;
}

nav .nav-item {
  flex: 1;
  display: grid;
  place-items: center;
  opacity: 0.5;
  transition: opacity var(--anim-speed);
}

nav .nav-item:active {
  background-color: rgba(255, 255, 255, 0.2);
}

nav .nav-item.active {
  opacity: 1;
}

nav::before {
  --indicator-width: calc(100% / var(--total-nav-items));
  content: "";
  position: absolute;
  height: 0.2rem;
  width: 100px;
  background-color: var(--text-color);
  bottom: 0;
  width: var(--indicator-width);
  left: calc(var(--index, 0) * var(--indicator-width));
  transition: left var(--anim-speed);
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
}

#container {
  position: fixed;
  top: --nav-height
  display: flex;
  height: 100vh;
}

.active-section {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow-y: scroll;
    padding: 5%;
    padding-bottom: 10%;
}

.inactive-section {
    display: none;
}

@media (prefers-color-scheme: dark) {
   :root {
    --nav-bg: rgb(31, 44, 52);
    --text-color: rgb(9, 148, 115);
  }
}

<header>
  <span>Whatsapp</span>
</header>

<nav>
  <div class="nav-item active">hello 1</div>
  <div class="nav-item">hello 2</div>
  <div class="nav-item">hello 3</div>
  <div class="nav-item">hello 4</div>
  <div class="nav-item">hello 5</div>
</nav>

<div id="container">
  <!-- 1 -->
  <section>
    <h1>PAGE 1</h1>
    <p>
      <!-- see the fifth for the longest paragraph -->
     <!-- Your content goes here -->
    </p>
  </section>

  <!-- Repeat for other sections -->

</div>

Answer 4

To achieve the desired effect for your code, I made some changes to your snippet. Instead of using CSS variables to adjust content visibility on different areas of the screen, I created two states for your sections:

Active (Flexbox)
Inactive (Invisible)

By switching from a grid display to using flexbox on the sections, scrolling behavior is now possible. I also added a fixed max height on active sections and responsive bottom padding for user-friendliness. Feel free to customize these aspects as needed.

If you need further explanation or assistance, please let me know!

let navItems = document.querySelectorAll(".nav-item");
let sections = Array.from(document.getElementById("container").children);

//Initially make all other sections inactive except the first
sections.forEach((section, index) => {
  if(index == 0) section.classList.add("active-section");
  else section.classList.add("inactive-section");
});

navItems.forEach((item, index) => {
  item.addEventListener("click", () => {

    toggleActive(index);

    function toggleActive(index) {
      // for setting opacity low to other not clicked icons
      navItems.forEach(itemWithClass => {
        itemWithClass.classList.remove("active");
      });
      
      //Make sections visible or invisible based on nav item clicked
      sections.forEach((section, i) => {
        if(i != index) {
          section.classList.remove("active-section");
          section.classList.add("inactive-section");
        } else {
        section.classList.remove("inactive-section");
          section.classList.add("active-section");
        }
      });

      // making visible the active clicked item
      item.classList.add("active");
    }
  });
});

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap");
:root {
  --nav-height: 3rem;
  --nav-bg: rgb(0, 128, 105);
  --text-color: white;
  --anim-speed: 0.5s;
  color-scheme: light dark;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

header {
  background-color: var(--nav-bg);
  height: var(--nav-height);
  display: grid;
  place-items: center start;
}

nav {
  display: flex;
  height: var(--nav-height);
  background-color: var(--nav-bg);
  color: var(--text-color);
  text-transform: uppercase;
  font-family: poppins;
  user-select: none;
  /* position: fixed; */
  /* top: 0; */
  /* left: 0; */
  position: sticky;
  top: 0;
  width: 100vw;
}

nav .nav-item {
  flex: 1;
  display: grid;
  place-items: center;
  opacity: 0.5;
  transition: opacity var(--anim-speed);
}

nav .nav-item:active {
  background-color: rgba(255, 255, 255, 0.2);
}

nav .nav-item.active {
  opacity: 1;
}

nav::before {
  --indicator-width: calc(100% / var(--total-nav-items));
  content: "";
  position: absolute;
  height: 0.2rem;
  width: 100px;
  background-color: var(--text-color);
  bottom: 0;
  width: var(--indicator-width);
  left: calc(var(--index, 0) * var(--indicator-width));
  transition: left var(--anim-speed);
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
}

#container {
  position: fixed;
  top: --nav-height
  display: flex;
  height: 100vh;
}

.active-section {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow-y: scroll;
    padding: 5%;
    padding-bottom: 10%;
}

.inactive-section {
    display: none;
}

@media (prefers-color-scheme: dark) {
   :root {
    --nav-bg: rgb(31, 44, 52);
    --text-color: rgb(9, 148, 115);
  }
}

<header>
  <span>Whatsapp</span>
</header>

<nav>
  <div class="nav-item active">hello 1</div>
  <div class="nav-item">hello 2</div>
  <div class="nav-item">hello 3</div>
  <div class="nav-item">hello 4</div>
  <div class="nav-item">hello 5</div>
</nav>

<div id="container">
  <!-- 1 -->
  <section>
    <h1>PAGE 1</h1>
    <p>
      <!-- see the fifth for the longest paragraph -->
     <!-- Your content goes here -->
    </p>
  </section>

  <!-- Repeat for other sections -->

</div>

The sticky element should only be active when the visible section is overflowing vertically. There should be no scrollbar if the height is minimal

Answer №1

Answer №2

Similar questions

Delete the line height (or leading) for bigger text in CSS

Swapping values in JSON by comparing specific keys: A guide

Error: The navigation property is not defined - React Native

Responsiveness of the element along the vertical axis

What are the different ways to share data between components in React?

Leveraging the power of jquery-tmpl with the responseText

I am puzzled as to why my Details Modal keeps appearing whenever I click anywhere, even when I have specifically added it to only show up on the event of today. Additionally, I am encountering

Issues with Implementing Scroll Directive in Angular JS

What is the best way to incorporate the skrollr-body tag without altering the overall height of the

Troubleshooting: jQuery click event not functioning correctly with if-else statement

ReactJS experiencing issue with the functionality of the all-the-cities library

Include an iframe with hidden overflow specifically for Safari browsers

Jquery is causing some issues with the code provided:

Updating Angular.js scope after a variable has been modified

Styling a webpage with a two-row layout using just CSS

What is the best way to refresh information following its removal?

The map feature is not working on the imported Obj file

Tips for iterating through a JSON object in JavaScript and building a table from it

Handling errors in chained promises and routes in Node.js/ExpressJS

Is it possible to define a shared function for enums in TypeScript?