'Prevent Position Change on Sticky Form Input

I have a simple webpage that has a header, dynamic content, and a sticky footer. In the footer, I have a form that has text input and a submit button.

In situations where the content extends beyond the visual area of the page, the sticky form behaves as expected (it's visible at the bottom of the visible area).

I noticed that when I input text changes into the text field of the form, the dynamic content will automatically scroll to the bottom. I have implemented a hack to scroll the content back to it's original position, but I was wondering if there was a way to disable the scrolling behavior to begin-with...

https://jsfiddle.net/vy8h77xr/18/

html:

<div class="list" id="list">
  <ul>
    <li>content</li>
    <!-- add more content to fill beyond the page -->
  </ul>
</div>
<div class="footer">
  <form id="form">
    <input type="text" id="text"/>
    <input type="submit" value="Submit" id="submit" />
  </form>
</div>

css:

.footer {
  position: sticky;
  bottom: 0;
}

js:

var text = document.getElementById("text");
text.addEventListener("keydown", (e) => {
    var y = window.scrollY;
    setTimeout(() => window.scrollTo(0, y), 0);
})
javascriptcssscrollstickysticky-footer


Solution 1:[1]

You are using sticky footer but with 0px from the bottom, so you don't exactly need this kind of position. Try tu simply make your footer fixed like this.

.footer {
   position: fixed;
   bottom: 0;
}

https://jsfiddle.net/Andrej_v/vy8h77xr/20/

You can find more about this position here:

https://developer.mozilla.org/en-US/docs/Web/CSS/position

Solution 2:[2]

I know I'm late to answer this. but you can easily to this by making a whole new footer sticky, and make the orignal footer constant on bottom: 0; You can Use Jquery Clone Method To Clone your orignal sticky footer. Then You'll just have to change the id and be careful while using the for attribute. it has the match the clone elements id.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Andrej V.
Solution 2 Hector Moone

Related Questions