Tips for activating this effect even when the window is resized during page scrolling

Question

Tips for activating this effect even when the window is resized during page scrolling

There's a code snippet that enables the header to become unfixed when a specific div reaches the top of the screen and then scrolls with the rest of the content.

While this solution works perfectly, I encountered a problem where the calculations for "const targetTopPos = targetEl.getBoundingClientRect().top" are incorrect when the page is already scrolled. I'm unsure why this issue is happening.

Another issue arises when the page is refreshed while scrolled down, causing the header to remain fixed until you scroll again.

Below is the code snippet:

I have included a console log for "targetTopPos" to help identify the issue.

javascript html css css-position

Answer 1

Answer №1

The reason is that you are redefining targetTopPos as a constant in your onresize event handler. Simply assign the new value to targetTopPos

Please refer to the code snippet below

window.onresize = function(event) {
    targetTopPos = targetEl.getBoundingClientRect().top;
    console.log(targetTopPos);
};

const headerEl = document.querySelector('header')
const targetEl = document.querySelector('#target')

let targetTopPos = targetEl.getBoundingClientRect().top

let isHeaderFixed = true

document.onscroll = () => {
  const targetTopOffset = targetEl.getBoundingClientRect().top
  
  if (isHeaderFixed && targetTopOffset < 100) {
    headerEl.style.position = 'absolute'
    headerEl.style.top = `${targetTopPos - 100}px`
    isHeaderFixed = !isHeaderFixed
  }
  
  if (!isHeaderFixed && targetTopOffset >= 100) {
    headerEl.style.position = 'fixed'
    headerEl.style.top = '0px'
    isHeaderFixed = !isHeaderFixed
  }
}

body {
  padding: 0;
  margin: 0;
  position: relative;
}

header {
  position: fixed;
  height: 100px;
  width: 100%;
  background: lightblue;
}

.content {
  line-height: 100px;
}

.target {
  width: 100%;
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  Custom header
</header>
<div class="content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit tellus urna, ut tristique felis lobortis sed. Phasellus maximus at magna mattis vulputate. Pellentesque tempor, urna vitae congue pellentesque, est mauris faucibus nulla, vitae molestie...

Answer 2

The reason is that you are redefining targetTopPos as a constant in your onresize event handler. Simply assign the new value to targetTopPos

Please refer to the code snippet below

window.onresize = function(event) {
    targetTopPos = targetEl.getBoundingClientRect().top;
    console.log(targetTopPos);
};

const headerEl = document.querySelector('header')
const targetEl = document.querySelector('#target')

let targetTopPos = targetEl.getBoundingClientRect().top

let isHeaderFixed = true

document.onscroll = () => {
  const targetTopOffset = targetEl.getBoundingClientRect().top
  
  if (isHeaderFixed && targetTopOffset < 100) {
    headerEl.style.position = 'absolute'
    headerEl.style.top = `${targetTopPos - 100}px`
    isHeaderFixed = !isHeaderFixed
  }
  
  if (!isHeaderFixed && targetTopOffset >= 100) {
    headerEl.style.position = 'fixed'
    headerEl.style.top = '0px'
    isHeaderFixed = !isHeaderFixed
  }
}

body {
  padding: 0;
  margin: 0;
  position: relative;
}

header {
  position: fixed;
  height: 100px;
  width: 100%;
  background: lightblue;
}

.content {
  line-height: 100px;
}

.target {
  width: 100%;
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  Custom header
</header>
<div class="content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit tellus urna, ut tristique felis lobortis sed. Phasellus maximus at magna mattis vulputate. Pellentesque tempor, urna vitae congue pellentesque, est mauris faucibus nulla, vitae molestie...

Tips for activating this effect even when the window is resized during page scrolling

Answer №1

Similar questions

Mastering Puppeteer: Tips for Successfully Submitting Forms

Create automatic transcripts for videos, including subtitles and captions

Unique ways to serialize an HTML element efficiently: JavaScript tricks

Are there any methods for simultaneously hosting both React and vanilla JavaScript websites?

Go to a different page section using MUI 5

Highlighting table rows when hovering in IE with JQuery - compatibility across all versions

Is there a way to alter the color of a single row within a column in a jtable based on a specific condition?

Assigning an interface to a useFetch object in Vuejs 3 and Nuxtjs 3: A step-by-step guide

Setting font sizes using CSS values according to the Shadow DOM root element

The node-vibrant module in combination with React

Convert a JavaScript object into a serialized form

Unable to retrieve the value property from document.getElementById as it is null

Ways to retrieve Data obtained in response using superagent

Passing a Javascript variable to the NAME attribute of an HTML <a href> tag: Steps to do it efficiently

What is the correct way to incorporate Regular Expressions in Selenium IDE coding?

The npm command encountered a permission issue when trying to install node-sass

Vue.js and TypeScript combination may result in a 'null' value when using file input

Adding elements in increasing order based on the array values

Combine a variable and a string to create a new variable

Buttons aligned vertically alongside an input text field