javascript - 使用 Window.resize 和媒体查询来移动一个 div 元素

标签 javascript jquery html css

demo image我正在使用窗口调整大小功能来检查我的页面的宽度，如果它低于 891，我将触发该功能以将我的#formWrapper div 移动到页面上的#formbottom，媒体查询设置为最大宽度 891 以更改 formWrapper向左浮动，最大宽度为 100%。几乎一切正常，但有轻微的跳跃，当浏览器达到 891px 时，媒体查询和 JS 功能似乎有点不正常？

您可以通过调整浏览器窗口的大小来查看。任何见解将不胜感激。

  $(document).ready(function() {
    $(window).resize(function() {

      if ($(window).width() < 891) {
        $("#formWrapper").detach().appendTo('#formbottom');

      } else {
        if ($(window).width() > 891) {
          $("#formWrapper").detach().appendTo('#formtop');
        }
      }
    });
  }); 
@charset "utf-8";

/* CSS Document */


/* Reset */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
  box-sizing: border-box;
}


/* remember to define focus styles! */

:focus {
  outline: 0;
}

body {
  line-height: 1;
  background-color: #F2F2F2;
}

ol,
ul {
  list-style: none;
}


/* tables still need 'cellspacing="0"' in the markup */

table {
  border-collapse: separate;
  border-spacing: 0;
}

caption,
th,
td {
  text-align: left;
  font-weight: normal;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
}

blockquote,
q {
  quotes: "" "";
}

*,
*:before,
*:after {
  box-sizing: inherit;
}


/* LANDING PAGE */

html {
  position: relative;
  min-height: 100%;
}

body {
  font-family: proxima-nova, sans-serif;
  margin: 0 0 100px;
  /* bottom = footer height */
}

#container {
  width: 100%;
  margin: auto;
}

.content-wrapper {
  max-width: 1040px;
  margin: auto;
  overflow: hidden;
  padding-top: 38px;
  padding-right: 50px;
  padding-bottom: 50px;
  padding-left: 50px;
}


/* landing page masthead */

#mastheadBar {
  max-width: 100%;
  background-color: #FDA929;
}

#mastheadImage {
  max-width: 1520px;
  background-image: url(https://pages.infor.com/rs/227-UHD-858/images/hero.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-attachment: scroll;
  margin: auto;
}

.logoWrapper {
  max-width: 310px;
  margin-bottom: 50px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  line-height: 23px;
  color: #FFF;
  vertical-align: middle;
  display: table;
}

.LogoWrapperText {
  display: table-cell;
  vertical-align: middle;
  padding-left: 21px;
}

h1 {
  font-size: 50px;
  font-weight: 700;
  line-height: 54px;
  color: #FFF;
  max-width: 50.2128%;
  margin-top: -14px;
  margin-bottom: -8px;
}


/* landing page main content */

#mainContent {
  background-color: #fff;
  overflow: hidden;
}

#mainContent p {
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  color: #737373;
  padding-top: 12px;
}

#mainContent li {
  color: #737373;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  list-style-position: outside;
  margin: 0 0 8px 10px;
}

#mainContent ul {
  list-style-position: inside;
  list-style-type: disc;
  padding-top: 32px;
  padding-right: 8px;
  padding-bottom: 8px;
  padding-left: 8px;
}

#mainContentLeft {
  float: left;
  width: 57.4468085106383%;
  margin-top: -5px;
}

#mainContentLeftWrap {
  margin-bottom: 11px;
}

#mainContentRight {
  float: right;
  width: 31.91489361702128%;
  padding-top: 9px;
}

#mainContentRight img {
  max-width: 100%;
  height: auto;
}


/* footer */

#footer {
  background-color: #F2F2F2;
  font-size: 12px;
  font-weight: 400;
  color: #737373;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100px;
  width: 100%;
}

#footerWrapper {
  max-width: 1040px;
  margin: auto;
  padding: 22px 50px 22px 50px;
  overflow: hidden;
}


/* form page */

#formWrapper {
  background-color: #fff;
  box-shadow: 0 0 10px #888;
  box-sizing: border-box;
  float: right;
  margin-top: 120px;
  padding: 20px;
  width: 36.1702%;
}

#formWrapper img {
  max-width: 100%;
  height: auto;
}

.content-wrapperForm {
  max-width: 1040px;
  margin: auto;
  padding-top: 38px;
  padding-right: 50px;
  padding-bottom: 50px;
  padding-left: 50px;
  position: relative;
}

#mainContentWrap {
  background-color: #fff;
}

#mainContentWrap p {
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  color: #737373;
  padding-top: 12px;
}

#mainContentWrap li {
  color: #737373;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  list-style-position: outside;
  margin: 0 0 8px 10px;
}

#mainContentWrap ul {
  list-style-position: inside;
  list-style-type: disc;
  padding-top: 32px;
  padding-right: 8px;
  padding-bottom: 8px;
  padding-left: 8px;
}

.formIntro {
  float: left;
  width: 67%;
}

.formIntroCta {
  color: #595959;
  font-size: 18px;
  font-weight: 700;
  line-height: 22px;
  margin-bottom: 17px;
}

.formIntroReq {
  color: #737373;
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  margin-bottom: 34px;
}

.formIntroImg {
  float: right;
  width: 70px;
}

.formIntroImg img {
  max-width: 100%;
}


/* form */


/* form wrapper */

.mktoForm {
  text-align: left;
  width: 100% !important;
}


/* remove form wrapper padding mobile */

.mktoMobileShow .mktoForm,
.mktoForm * {
  padding: 0 !important;
}


/* remove form wrapper padding */

.mktoForm,
.mktoForm * {
  padding: 0 !important;
}


/* form column holding field and label */

.mktoForm .mktoFormCol {
  float: left;
  min-height: 2em;
  position: relative;
  width: 100% !important;
}


/* form column wrapper */

.mktoForm .mktoFieldWrap {
  float: none !important;
  width: 100% !important;
  margin-bottom: 15px !important;
}


/* form column left padding - set to zero to make columns flush to left */

.mktoForm .mktoOffset {
  float: left;
  height: 1.2em;
  width: 0 !important;
}


/* Non-required Label */

.mktoForm .mktoLabel {
  color: #999999;
  font-size: 14px;
  font-weight: 300 !important;
  line-height: 16px;
  margin-bottom: 7px !important;
  width: auto !important;
}


/* Required field label */

.mktoForm .mktoRequiredField label.mktoLabel {
  color: #999999;
  font-size: 14px;
  font-weight: 300 !important;
  line-height: 16px;
  margin-bottom: 7px;
}


/* Asterix appearance */

.mktoForm .mktoAsterix {
  color: #bf0000;
  float: right;
  padding-left: 5px;
}


/* Asterix position */

.mktoForm.mktoLayoutAbove .mktoRequiredField .mktoAsterix {
  float: right !important;
  padding-left: 0;
  padding-right: 0;
}


/* Field formating */

.mktoForm input[type="text"],
.mktoForm input[type="url"],
.mktoForm input[type="email"],
.mktoForm input[type="tel"],
.mktoForm input[type="number"],
.mktoForm input[type="date"],
.mktoForm textarea.mktoField,
.mktoForm select.mktoField {
  border: 1px solid #d9d9d9 !important;
  padding: 10px 12px !important;
  width: 100% !important;
  height: auto !important;
}


/* Button row container */

.mktoButtonRow {
  display: inline-block;
  position: relative;
  width: 100%;
}


/* Button style */

.mktoForm button.mktoButton {
  background-color: #fc6621;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 16px;
  font-weight: 300;
  line-height: 19px;
  padding: 12px !important;
  width: 100%;
  margin-top: 14px;
  margin-right: 0;
  margin-bottom: -6px;
  margin-left: 0;
}


/* Reset for form items to be flush left */

.mktoForm div,
.mktoForm span,
.mktoForm label,
.mktoForm p {
  margin: 0 !important;
  text-align: left;
}


/* Field text formating */

.mktoForm .mktoField {
  color: #666666;
  float: left;
  font-size: 16px !important;
  line-height: 19px;
}


/* Comment field formating */

.mktoForm.mktoLayoutAbove textarea.mktoField {
  float: left;
  margin-bottom: 7px;
}


/* Float check and radio button right */

.mktoRadioList {
  width: auto !important;
  float: left !important;
  clear: none !important;
}


/* Remove left padding from Radio and Checkbox */

.mktoForm .mktoRadioList,
.mktoForm .mktoCheckboxList {
  padding: 0 !important;
}

.mktoForm select.mktoField::-ms-expand {
  display: none;
}

.mktoForm select.mktoField {
  background: url(http://na-ab22.marketo.com/rs/625-VIS-608/images/input_icon_selector.png) no-repeat right;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  background-position-x: 97%;
}


/* Checkbox formating */

.mktoCheckboxList input {
  opacity: 0;
  position: absolute;
}

.mktoCheckboxList input,
.mktoCheckboxList label {
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  cursor: pointer;
}

.mktoCheckboxList label {
  position: relative;
}


/* Edit the properties below to change the colors of the un-checked checkbox */

.mktoCheckboxList input+label:before {
  background: #fff none repeat scroll 0 0;
  border: 1px solid #d9d9d9;
  content: "";
  display: inline-block;
  height: 25px;
  margin-right: 10px;
  padding: 4px;
  text-align: center;
  vertical-align: middle;
  width: 25px;
}


/* Edit the properties below to change the colors of the checked checkbox */

.mktoCheckboxList input:checked+label:before {
  content: "\2713";
  background: #56CFD2;
  color: #fff;
  border-color: #3eb9bc;
}

body .mktoForm .mktoCheckboxList>label {
  margin-left: 0;
}


/* Checkbox and Radio formating */

.mktoRadioList input {
  opacity: 0;
  position: absolute;
}

.mktoRadioList input,
.mktoRadioList label {
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  cursor: pointer;
}

.mktoRadioList label {
  position: relative;
}


/* Edit the properties below to change the colors of the un-checked radio button */

.mktoRadioList input+label:before {
  background: #fff none repeat scroll 0 0;
  border: 2px solid #ddd;
  content: "";
  display: inline-block;
  height: 25px;
  line-height: 15px;
  margin-right: 10px;
  padding: 4px;
  text-align: center;
  vertical-align: middle;
  width: 25px;
  ;
}

.mktoRadioList input+label:before {
  border-radius: 50%;
}


/* Edit the properties below to change the colors of the checked radio button */

.mktoRadioList input:checked+label:before {
  content: "\2713";
  color: #bbb;
}

.mktoRadioList input:focus+label {
  outline: 1px solid #ddd;
  /* focus style */
}


/* Radio button label padding */

body .mktoForm .mktoRadioList>label {
  float: left;
  margin-left: 0;
  padding-right: 10px !important;
}


/* Radio button wrapper padding */

.mktoForm.mktoLayoutAbove .mktoRadioList {
  margin-top: -5px !important;
  padding-left: 10px !important;
}


/* Error Message */

.mktoForm .mktoError {
  color: #666666;
  position: absolute;
  z-index: 99;
}


/* Error Message arrow */

.mktoForm .mktoError .mktoErrorArrow {
  background-color: #666666 !important;
  border-top-color: #666666 !important;
  border-right-color: #666666 !important;
  border-bottom-color: #666666 !important;
  border-left-color: #666666 !important;
  margin-top: 5px !important;
}


/* Error Message box */

.mktoForm .mktoError .mktoErrorMsg {
  background-color: #666666 !important;
  background-image: none !important;
  border: 1px solid #666666 !important;
  border-radius: 0px !important;
  box-shadow: none !important;
  padding: 5px !important;
  text-shadow: none !important;
  margin-top: 7px !important;
}


/*MEDIA QUERIES*/

@media all and (max-width:891px) {
  h1 {
    font-size: 45px;
    font-weight: 700;
    line-height: 49px;
    color: #FFF;
    max-width: 745px;
    margin-top: -14px;
    margin-bottom: 23px;
  }
  .content-wrapperForm {
    overflow: hidden;
  }
  #mainContentLeft {
    float: left;
    width: 100%;
    margin-top: 0;
  }
  #formWrapper {
    float: left;
    width: 100%;
    padding: 24px;
    margin-top: 10px;
    box-sizing: border-box;
    background-color: #FFF;
  }
}

@media all and (max-width:320px) {
  #mastheadImage {
    background-image: none;
  }
  .logoWrapper {
    margin-bottom: 30px;
  }
  h1 {
    font-size: 32px;
    font-weight: 700;
    line-height: 36px;
    margin-top: -11px;
    margin-bottom: 23px;
  }
  #footerWrapper {
    max-width: 1040px;
    margin: auto;
    padding: 22px 30px 22px 30px;
    overflow: hidden;
  }
}
<!doctype html>
<html>

<head>

  <!-- Other Meta Tags -->
  <meta charset="utf-8">
  <link href="LP-Standard-Form-2017-2.css" rel="stylesheet" type="text/css">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>${page-title}</title>




  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</head>

<body>

  <!-- container -->
  <div id="container">
    <!-- masthead -->
    <div id="mastheadBar">
      <div id="mastheadImage">
        <div class="content-wrapperForm">
          <div id="formtop">
            <div id="formWrapper">
              <div class="formIntro">
                <div class="formIntroCta">Please fill in the form below.</div>
                <div class="formIntroReq">Fields marked with a <span style="color: #fc6621">*</span> are required.</div>
              </div>
              <div class="formIntroImg"></div>
              <div class="mktoForm" id="DKform1" mktoName="Form"></div>
            </div>
          </div>
          <div class="logoWrapper">
            <div class="LogoWrapperText">${logo-text}</div>
          </div>
          <h1>${page-title}</h1>
        </div>
      </div>
    </div>
    <!--/masthead -->
    <!--main content-->
    <div id="mainContentWrap">
      <div class="content-wrapperForm">
        <div id="mainContentLeft">
          <div id="mainContentLeftWrap" class="mktoText" mktoName="Main Body Text">
            <p>Aenean sed orci efficitur, convallis arcu sit amet, consequat dolor. Vestibulum vestibulum nisl quis mattis rhoncus. Cras ut imperdiet leo. Phasellus luctus mauris lectus, quis semper dui dignissim at. Donec lacinia, turpis ac hendrerit dictum,
              erat nisl iaculis lacus, eu ultrices libero nisi eu sapien. Praesent id congue elit, sed rutrum lorem. Duis quis nisi elit. Pellentesque nec cursus leo.</p>
            <p>Vivamus quis ex pellentesque, pharetra elit eget, molestie arcu:</p>
            <ul>
              <li>Integer ornare velit metus, sit amet tincidunt neque</li>
              <li>luctus vitae. Suspendisse vulputate cursus</li>
              <li>scelerisque. Sed ac lectus eget nisi facilisis</li>

            </ul>
            <p>Aenean sed orci efficitur, convallis arcu sit amet, consequat dolor. Vestibulum vestibulum nisl quis mattis rhoncus. Cras ut imperdiet leo. Phasellus luctus mauris lectus, quis semper dui dignissim at. Donec lacinia, turpis ac hendrerit dictum,
              erat nisl iaculis lacus, eu ultrices libero nisi eu sapien. Praesent id congue elit, sed rutrum lorem. Duis quis nisi elit. Pellentesque nec cursus leo.</p>
            <p>Vivamus quis ex pellentesque, pharetra elit eget, molestie arcu:</p>
            <ul>
              <li>Integer ornare velit metus, sit amet tincidunt neque</li>
              <li>luctus vitae. Suspendisse vulputate cursus</li>
              <li>scelerisque. Sed ac lectus eget nisi facilisis</li>
            </ul>
            <p>Aenean sed orci efficitur, convallis arcu sit amet, consequat dolor. Vestibulum vestibulum nisl quis mattis rhoncus. Cras ut imperdiet leo. Phasellus luctus mauris lectus, quis semper dui dignissim at. Donec lacinia, turpis ac hendrerit dictum,
              erat nisl iaculis lacus, eu ultrices libero nisi eu sapien. Praesent id congue elit, sed rutrum lorem. Duis quis nisi elit. Pellentesque nec cursus leo.</p>
            <p>Vivamus quis ex pellentesque, pharetra elit eget, molestie arcu:</p>
            <ul>
              <li>Integer ornare velit metus, sit amet tincidunt neque</li>
              <li>luctus vitae. Suspendisse vulputate cursus</li>
              <li>scelerisque. Sed ac lectus eget nisi facilisis</li>
            </ul>
            <p>Aenean sed orci efficitur, convallis arcu sit amet, consequat dolor. Vestibulum vestibulum nisl quis mattis rhoncus. Cras ut imperdiet leo. Phasellus luctus mauris lectus, quis semper dui dignissim at. Donec lacinia, turpis ac hendrerit dictum,
              erat nisl iaculis lacus, eu ultrices libero nisi eu sapien. Praesent id congue elit, sed rutrum lorem. Duis quis nisi elit. Pellentesque nec cursus leo.</p>
            <p>Vivamus quis ex pellentesque, pharetra elit eget, molestie arcu:</p>
            <ul>
              <li>Integer ornare velit metus, sit amet tincidunt neque</li>
              <li>luctus vitae. Suspendisse vulputate cursus</li>
              <li>scelerisque. Sed ac lectus eget nisi facilisis</li>
            </ul>
          </div>

        </div>
        <div id="formbottom"></div>
      </div>
      <div style="clear:both"></div>

    </div>

  </div>
  <!--/main content-->
  <!--footer-->

  <div id="footer">
    <div id="footerWrapper">© Copyright
      <script type="text/javascript">
        document.write(new Date().getFullYear());
      </script> Infor. All rights reserved.</div>
  </div>
  <!--/footer-->

  </div>
  <!--/container -->





</body>

</html>

最佳答案

我没有更改代码，只是将过渡属性添加到#fromWrapper。

请找出答案。 Updated code 

#formWrapper {
  float: left;
  width: 100%;
  padding: 24px;
  margin-top: 10px;
  box-sizing: border-box;
  background: #FFF;
  transition: all 1s linear;
}

关于javascript - 使用 Window.resize 和媒体查询来移动一个 div 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43894281/

上一篇：javascript - 如何解决输入范围 slider 的跨浏览器兼容性问题？

下一篇：css - 自定义字体不显示

相关文章：

javascript - 正则表达式不会在应该失败的时候失败

jquery - 保持表格 thead 第 1 行和 tbody 第 1 列修复了 IE 中滚动水平滚动条闪烁的问题

javascript - 从 Json 文件加载 Enum 值数组

javascript - 多个 if 在 JavaScript 中做多件事

javascript - d3.js - 多折线图不更新圆圈

javascript - 函数令人惊讶地改变传单 map 中的多边形坐标

javascript - 在knockoutJs中使用父ID的嵌套菜单

javascript - 将 onclick 分配给函数问题

javascript - 如何防止 Dragleave 干扰嵌套 dropzone 元素上的 Dragenter 事件？

javascript - JS 十六进制字符串到文件的实际字节值

©2024 IT工具网  联系我们