Прикрепленный раздел обзора заказов woocommerce - PullRequest
Новая
       50

Прикрепленный раздел обзора заказов woocommerce

0 голосов
/ 09 апреля 2020

У меня возникли некоторые проблемы с тем, чтобы раздел о порядке проверки (в данном случае запрос) придерживался нижней части заголовка на свитке.

Я прошел несколько jquery примеров без удачи и Сейчас я играю с липкой позиции для элемента. Используя пример codepen и поэкспериментировав с ним, я заставил его работать нормально и безуспешно пытался воспроизвести его на странице через инспектора.

Пример Codepen

HTML

<main class="main-container">
  <header class="main-header">HEADER</header>
  <div class="main-content">MAIN CONTENT</div>
  <div class="second-content">SECOND CONTENT</div> 
  <footer class="main-footer">FOOTER</footer>
</main>

CSS

body{color:#fff; font-family:arial; font-weight:bold; font-size:40px; }
.main-container{ max-width:1000px; margin:0 auto; border:solid 10px green; padding:10px; margin-top:40px;}
.main-container *{padding:10px;background:#aaa; border:dashed 5px #000;}
.main-container * + *{margin-top:20px;}
.main-header{
  height:50px; background:#aaa; border-color:red;
}
.main-content{
    display:inline-block;
    width:49%;
    height:900px;
}

.second-content{
  display:inline;
  width: 49%;
  height: 200px;
  position: sticky;
  top:0;
}

https://codepen.io/elad2412/pen/QYLEdK

URL веб-сайта https://trolleys.wpengine.com/

Исходя из моего понимания, вам понадобится jQuery, чтобы не допустить его прохождения через нижний колонтитул, а также правильно?

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

Это пример, который лучше всего показывает, что я после, попытался реализовать это, но не смог заставить его работать. http://jsfiddle.net/bryanjamesross/VtPcm/

1 Ответ

0 голосов
/ 15 апреля 2020

Исправлено,

Нужно было придать форме несколько дополнительных атрибутов, я применял их к внешнему элементу. 

form.checkout {
    height: 1500px;
    position:relative;
    display:block;
}
...