Sticky Text Box

[sustic]

Hi
Can you please give me some hints how do I create a sticky text box in the lower left part of the screen when the viewport is <1024px?

[anti-duhring]

This input already exist or do you wanna create it?

Also, do you wanna detect the resize of the window? If the answer is yes, you can use an eventListener:

window.addEventListener('resize', function(event){
   if(window.innerWidth > 1024){
      const input = document.createElement('input');
      input.classList.add('fixed-input');
      document.querySelector('body').append(input)
    }
});

However, if you want to detect small screens and only put the textbox in them you can use the Window.innerWidth propety. Ex:

window.onload = function(){
    if(window.innerWidth > 1024){
      const input = document.createElement('input');
      input.classList.add('fixed-input');
      document.querySelector('body').append(input)
    }
}

And add this code in your CSS:

.fixed-input {
    position: fixed;
    left: 0;
    bottom: 0;
}

[sustic]

Hi. Thanks a lot for your answer @ anti-duhring. No the text field does not exist. I create it when the viewport <1024 is.