Tips for positioning the image at the top of the viewport and overlaying additional elements on it

I've set up a header component that contains both a slim menu (which disappears when scrolling down) and a sticky navigation bar (always visible, becomes fixed to the top and expands in size when the slim menu vanishes).

However, I am facing an issue with an img element that should always remain visible above the sticky-nav (currently only shows when the sticky-nav is fixed). How can I modify my header component so it allows this image to be positioned "on top" of other page elements, serving as a background for the sticky-nav?

Desired look (at all times): https://i.sstatic.net/Xq53j.png

      const wrapper = document.querySelector('.wrapper');
      const skinnyBanner = document.querySelector('.skinny-banner');
      let previousScrollY = window.scrollY;

      function updateSticky() {
        const currentScrollY = window.scrollY;

        if (currentScrollY > skinnyBanner.offsetHeight) {
          wrapper.classList.add('isSticky');
        } else {
          wrapper.classList.remove('isSticky');
        }

        previousScrollY = currentScrollY;
      }

      window.addEventListener('scroll', updateSticky);
body {
  margin: 0;
  height: 200vh;
}

.skinny-banner {
  background: lightblue;
  height: 40px;
  display: flex;
}

.nav-menu {
  display: flex;
}

.sticky-nav {
  background: salmon;
  padding: 0 16px;
  height: 120px;
  opacity: 50%;
  backdrop-filter: blur(20px);
}

.sticky-nav ul {
  display: flex;
}

/* Styles for when the header is in sticky mode */

.wrapper.isSticky .sticky-nav {
  position: fixed;
  top: 0;
  height: 66px;
  width: 100%;
}

.wrapper.isSticky .skinny-banner {
  display: none;
}
  <header>
    <div class="wrapper">
      <div class="skinny-banner">Slim banner that disappears on scroll down.</div>
      <div class="sticky-nav">Sticky header that sticks to the top and shrinks in height when fixed
      <ul>
      <li>Flex items</li>
      </ul>
      </div>
    </div>
  </header>

  <img src="https://placekitten.com/1440/671" />

htmlcss

Answer №1

Make sure to set the position to absolute and width to 100% by default for the .sticky-nav element. Here's the revised code snippet:

      const wrapper = document.querySelector('.wrapper');
      const skinnyBanner = document.querySelector('.skinny-banner');
      let previousScrollY = window.scrollY;

      function updateSticky() {
        const currentScrollY = window.scrollY;

        if (currentScrollY > skinnyBanner.offsetHeight) {
          wrapper.classList.add('isSticky');
        } else {
          wrapper.classList.remove('isSticky');
        }

        previousScrollY = currentScrollY;
      }

      window.addEventListener('scroll', updateSticky);
body {
  margin: 0;
  height: 200vh;
}

.skinny-banner {
  background: lightblue;
  height: 40px;
  display: flex;
}

.nav-menu {
  display: flex;
}

.sticky-nav {
  position: absolute;
  width: 100%;
  background: salmon;
  padding: 0 16px;
  height: 120px;
  opacity: 50%;
  backdrop-filter: blur(20px);
}

.sticky-nav ul {
  display: flex;
}


/* styles for when the header is in sticky mode */

.wrapper.isSticky .sticky-nav {
  position: fixed;
  top: 0;
  height: 66px;
}

.wrapper.isSticky .skinny-banner {
  display: none;
}
  <header>
    <div class="wrapper">
      <div class="skinny-banner">Skinny banner that on scroll down disappears.</div>
      <div class="sticky-nav">Sticky Header that on scroll down sticks to top and shrinks in height when stuck
      <ul>
      <li>Flex items</li>
      </ul>
      </div>
    </div>
  </header>
  
  <img src="https://placekitten.com/1440/671" />

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using PHP to send date and time form fields to MySQL

I have been searching for a solution in the community forums, and the closest answer I found was in the thread titled "trying-to-post-date-via-php-with-mysql-need-help" My issue involves a form with 2 input fields - one for date selection using an HTML5 p ...

phpmysqlformshtml

Ways to transfer Material-UI FlatButton CSS to a different Button element

I've recently incorporated a loading button object into my website from (https://github.com/mathieudutour/react-progress-button), and now I want to customize it using the Material-UI FlatButton CSS. However, I'm not quite sure how to achieve this ...

javascriptcssreactjsmaterial-ui

Having trouble locating the CSS and JavaScript files within my Spring Maven project

I have a Spring framework application with a Maven project. In addition, I have CSS and JavaScript files under the WEB-INF folder. When attempting to link the JavaScript and CSS files like this: <link rel="stylesheet" href="../allDesign/js/vendor/anims ...

javascriptcssspringmavennetbeans

Eliminate unnecessary spaces during HTML transformation using XSLT

I am looking to minimize the size of my HTML result generated from transforming an XML doc. My goal is to remove all white spaces and line endings. What would be the best way to achieve this? ...

htmlxsltwhitespacestrip

Combining mouse interactions with animated bar transitions

I want to create a graph with dynamic bar height transitions whenever it is drawn or redrawn. Once the bars are displayed, I would like mouse events (mouseenter, mouseleave, and mousemove) to trigger a tooltip showing information about the specific bar bei ...

javascripthtmld3.jsmouseevent

Getting the value from a textarea when submitting a form: The ultimate guide

I have a challenge with using textarea to capture book descriptions because textarea does not have a "value" attribute. How can I pass the value to the bean? However, the method below to capture the value does not appear to be working <textarea cols=" ...

htmljsfrichfaces

Replace 'hover' functionality with a different action when another particular class is present

One of the buttons in my project looks like this: <button type="button" class="btn btn-link btn-link-dark"> <i class="material-icons">help</i> </button> By default, when I hover over it, the button turns blue. However, I want to ...

htmlcssbootstrap-4

Make the adjustment from an H1 tag to an H2 tag with the help of

I need assistance with changing the HTML code from using an <h1> tag to a <h3> tag, using Vanilla JavaScript. Here is the code snippet in question: <h1 class="price-heading ult-responsive cust-headformat" data-ultimate-target=" ...

javascripthtml

Locate a JQuery element within another JQuery element

Apologies for my poor grasp of English. I am working with HTML and JavaScript. <noindex> <h1>This is h1 in noindex</h1> <div> <h1>This is h1 in noindex and in div</h1> <div> <h1>This is h1 in noindex a ...

javascriptjqueryhtml

Trouble Arising from the Lack of Coordination Between CSS Transition and JavaScript Update Triggered by Element

I'm currently working on a web development project that involves a list of clickable elements. When one of these elements is clicked, it should become active and trigger a CSS transition (such as a transform) with a duration of 200ms. Additionally, I ...

javascriptcsscanvascss-transitions

Creating a multi-column dropdown menu: options for two, three, or multiple columns

Is there a way to implement multiple columns in a dropdown menu using the grid system in Bootstrap 4? Here is the code I have tried so far, but it's not working as expected (please note that the snippet is mobile-responsive) <!DOCTYPE html> ...

htmlcssbootstrap-4

Django: showcasing a related model's key in a template

I am new to Django and struggling with displaying a foreign key in the template. In my Job model, I have 'employer' as a ManyToManyField: from django.db import models # Create your models here. class Employer(models.Model): id = models.Auto ...

pythonhtmldjango

Tips for Building Common Controller Logic in CakePHP

I am in the process of developing a website where I have set up dynamic content for the footer, which is retrieved from a database. I am looking to create a single controller logic code that can be used across all pages on the site. Any suggestions or gu ...

phphtmlcakephpcontroller

Tabs fail to load any content within their designated tab-panes

Struggling to create a bootstrap site with nav-tabs navigation. Can't figure out why the content isn't loading in the tab-pane. The tutorial works, but my project doesn't. Any assistance would be appreciated. I want the tabbed content to dis ...

javascriptjquerycsstwitter-bootstrap

Add a React component to the information window of Google Maps

I have successfully integrated multiple markers on a Google Map. Now, I am looking to add specific content for each marker. While coding everything in strings works fine, I encountered an issue when trying to load React elements inside those strings. For ...

htmlreactjstypescriptgoogle-maps

Changing JSON names to display on a webpage

I am looking to modify the name displayed in a json file for presentation on a page using ion-select. mycodehtml ion-select [(ngModel)]="refine" (ionChange)="optionsFn(item, i);" > <ion-option [value]="item" *ngFor="let item of totalfilter ...

javascripthtmljsontypescriptionic2

Prevent the row height from fluctuating following the fadeOut() effect

Currently, I am facing an issue with two elements on my page: .start_over_button and .speed_buttons. In CSS, the .start_over_button is set to display: none, and in my JavaScript code, I have it so that when .speed_buttons are clicked, they fade out and the ...

jqueryhtmlcss

Trigger event once item is selected from the jQuery combobox dropdown

I have implemented a custom autocomplete combobox using the jQuery UI library to create text fields with dropdown functionality. This hybrid input allows users to either select an item from the dropdown or enter free text manually. However, I need to trigg ...

javascriptjqueryhtmlformsjquery-ui

Unable to click on the password field using a mouse - encountering a problem on a PHP

The link to access the email admin panel is While I am able to click on the username field, I am unable to click on the password field. The only way to place focus on it is by using the tab button on the keyboard. Initially, everything was functioning co ...

htmlcss

Change the function from onLoad to onClick exclusively

I'm experiencing a particle explosion on my webpage due to this code. I connected the onClick function to a button in my HTML so it executes only when that specific button is clicked. However, the function automatically runs when I load the HTML and ...

javascripthtmlthree.js