Блог

Главная - Вопросы по программированию - Как сохранить местоположение элемента при изменении размера веб-страницы

Как сохранить местоположение элемента при изменении размера веб-страницы

#javascript #html #css

Вопрос:

Моя цель состоит в том, что я пытаюсь сохранить местоположение элемента при настройке браузера и / или переключении на более крупный дисплей.

Я построил небольшую скользящую функцию, которая, когда я нажимаю каждую кнопку, мой элемент .trans1 перемещается между кнопками туда и обратно.

Проблема, с которой я сталкиваюсь, заключается в том, что мой trans1 элемент отключается при изменении размера браузера, я надеюсь, что все имеет смысл и кто-то может помочь.

 const tranImg= document.getElementById('trans');  

window.onload= trans;
// Make the trans move back and forth.
function trans(){
        console.log('test click')
        tranImg.style.transform = 'translatex(0%)';
        
        const xhr = new XMLHttpRequest();

        xhr.open("GET", "splash.html");
        
        xhr.onreadystatechange = () => {
            if(xhr.readyState === 4){
                document.querySelector(".app").innerHTML = xhr.response;
            }
        };
        
        xhr.send();
};

// Make the trans move back and forth.
function trans2(){
    console.log('hey trans2')
        tranImg.style.transform = 'translatex(180%)';

        const xhr = new XMLHttpRequest();

xhr.open("GET", "website.html");

xhr.onreadystatechange = () => {
    if(xhr.readyState === 4){
        document.querySelector(".app").innerHTML = xhr.response;
    }
};

xhr.send();
}; 
 .trans-container {
  position: relative;
  top: 220px;
  width: 100%;
  height: auto;
}

#make-trans {
  display: flex;
  position: relative;
  width: 100%;
}

.trans1 {
  z-index: 980;
  margin-top: 3px;
  left: 11%;
  position: relative;
  top: 0.2px;
  transition: transform 0.8s;
} 
  <div class="selectBtns">
        <button class="btns" id="btn2" onclick="trans()">Landing page</button>
        <button class="btns" onclick="trans2()">Website</button>
    </div>
    <div class="trans-container">
    <div id="make-trans">
        <img id="trans"  class="trans1" src="./images/svg-path (1).svg" alt="transition tab" width="400px">
    </div>
    <div class="xml-change">
        <div class="app"></div>
    </div>
</div>

Комментарии:

1. Вы можете использовать позицию:исправлено;. Это делает положение элемента фиксированным.

2. Спасибо, Лина, однако это исправит мой элемент только при прокрутке вверх и вниз. Это не будет работать при изменении размера браузера

Метки: