Как сделать форму Marketo липкой на свитке?

У нас есть следующая форма Marketo, которую мы хотим сделать липкой, когда она отображается на странице. Тем не менее, мы сталкиваемся с проблемами, используя position: sticky приписывать.

Как бы мы сделали форму Marketo липкой, когда она отображается в виде двух столбцов?

.mktoForm .mktoButtonWrap.mktoShadow .mktoButton {
color:#000;
background:#fff;
border:1px solid #5e9cd3;
padding:0.4em 1em;
font-size:1em;
box-shadow: 3px 3px 10px 0px #ccc;
background-color:#b2d0eb;
background-image: -webkit-gradient(linear, left top, left bottom, from(#b2d0eb), to(#9ec5e8));
background-image: -webkit-linear-gradient(top, #b2d0eb, #9ec5e8);
background-image: -moz-linear-gradient(top, #b2d0eb, #9ec5e8);
background-image: linear-gradient(to bottom, #b2d0eb, #9ec5e8);
}
.mktoForm .mktoButtonWrap.mktoShadow .mktoButton:hover {
border:1px solid #106eb4;
}
.mktoForm .mktoButtonWrap.mktoShadow .mktoButton:focus {
outline:none;
border:1px solid #106eb4;
}
.mktoForm .mktoButtonWrap.mktoShadow .mktoButton:active{
box-shadow:inset 3px 3px 10px 0px #aaa;
}
.mkto--sticky {
  position: sticky;
  position: -webkit-sticky;
  top: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col"> Content in left column. Interactively redefine business relationships via magnetic portals. Dynamically innovate web-enabled products with distributed infrastructures. Interactively morph interactive scenarios with.</div>
    <div class="col mkto--sticky">
    <form id="mktoForm_1057" novalidate="novalidate" class="mktoForm mktoHasWidth mktoLayoutLeft" style="font-family: Helvetica, Arial, sans-serif; font-size: 13px; color: rgb(51, 51, 51); width: 271px;"><div class="mktoFormRow"><div class="mktoFieldDescriptor mktoFormCol" style="margin-bottom: 10px;"><div class="mktoOffset" style="width: 10px;"></div><div class="mktoFieldWrap"><label for="FirstName" class="mktoLabel mktoHasWidth" style="width: 100px;"><div class="mktoAsterix">*</div>First Name:</label><div class="mktoGutter mktoHasWidth" style="width: 10px;"></div><input id="FirstName" name="FirstName" maxlength="255" type="text" class="mktoField mktoTextField mktoHasWidth" style="width: 150px;"><div class="mktoClear"></div></div><div class="mktoClear"></div></div><div class="mktoClear"></div></div><div class="mktoFormRow"><div class="mktoFieldDescriptor mktoFormCol" style="margin-bottom: 10px;"><div class="mktoOffset" style="width: 10px;"></div><div class="mktoFieldWrap"><label for="LastName" class="mktoLabel mktoHasWidth" style="width: 100px;"><div class="mktoAsterix">*</div>Last Name:</label><div class="mktoGutter mktoHasWidth" style="width: 10px;"></div><input id="LastName" name="LastName" maxlength="255" type="text" class="mktoField mktoTextField mktoHasWidth" style="width: 150px;"><div class="mktoClear"></div></div><div class="mktoClear"></div></div><div class="mktoClear"></div></div><div class="mktoFormRow"><div class="mktoFieldDescriptor mktoFormCol" style="margin-bottom: 10px;"><div class="mktoOffset" style="width: 10px;"></div><div class="mktoFieldWrap"><label for="Email" class="mktoLabel mktoHasWidth" style="width: 100px;"><div class="mktoAsterix">*</div>Email Address:</label><div class="mktoGutter mktoHasWidth" style="width: 10px;"></div><input id="Email" name="Email" maxlength="255" type="email" class="mktoField mktoEmailField mktoHasWidth" style="width: 150px;"><div class="mktoClear"></div></div><div class="mktoClear"></div></div><div class="mktoClear"></div></div><div class="mktoFormRow"><div class="mktoFieldDescriptor mktoFormCol" style="margin-bottom: 10px;"><div class="mktoOffset" style="width: 10px;"></div><div class="mktoFieldWrap"><label for="Phone" class="mktoLabel mktoHasWidth" style="width: 100px;"><div class="mktoAsterix">*</div>Phone Number:</label><div class="mktoGutter mktoHasWidth" style="width: 10px;"></div><input id="Phone" name="Phone" maxlength="255" type="tel" class="mktoField mktoTelField mktoHasWidth" style="width: 150px;"><div class="mktoClear"></div></div><div class="mktoClear"></div></div><div class="mktoClear"></div></div><div class="mktoFormRow"><div class="mktoFieldDescriptor mktoFormCol" style="margin-bottom: 10px;"><div class="mktoOffset" style="width: 10px;"></div><div class="mktoFieldWrap"><label for="Country" class="mktoLabel mktoHasWidth" style="width: 100px;"><div class="mktoAsterix">*</div>Country:</label><div class="mktoGutter mktoHasWidth" style="width: 10px;"></div><select id="Country" name="Country" class="mktoField mktoHasWidth" style="width: 150px;"><option value="">Select...</option><option value="USA">USA</option><option value="UK">UK</option><option value="NL">Netherlands</option></select><div class="mktoClear"></div></div><div class="mktoClear"></div></div><div class="mktoClear"></div></div><div class="mktoFormRow"><div class="mktoFieldDescriptor mktoFormCol" style="margin-bottom: 10px;"><div class="mktoOffset" style="width: 10px;"></div><div class="mktoFieldWrap"><label for="vehicleSize" class="mktoLabel mktoHasWidth" style="width: 100px;"><div class="mktoAsterix">*</div>Vehicle Size:</label><div class="mktoGutter mktoHasWidth" style="width: 10px;"></div><select id="vehicleSize" name="vehicleSize" class="mktoField mktoHasWidth" style="width: 150px;"><option value="">Select...</option><option value="Massive">Massive</option><option value="Normal">Normal</option><option value="Tiny">Tiny</option></select><div class="mktoClear"></div></div><div class="mktoClear"></div></div><div class="mktoClear"></div></div><div class="mktoFormRow"><input type="hidden" name="userIsAwesome" class="mktoField mktoFieldDescriptor mktoFormCol" value="" style="margin-bottom: 10px;"><div class="mktoClear"></div></div><div class="mktoFormRow"><input type="hidden" name="enrollDate" class="mktoField mktoFieldDescriptor mktoFormCol" value="" style="margin-bottom: 10px;"><div class="mktoClear"></div></div><div class="mktoButtonRow"><span class="mktoButtonWrap mktoShadow" style="margin-left: 120px;"><button type="submit" class="mktoButton">Submit</button></span></div><input type="hidden" name="formid" class="mktoField mktoFieldDescriptor" value="1057"><input type="hidden" name="munchkinId" class="mktoField mktoFieldDescriptor" value="785-UHP-775"></form>

    </div>
  </div>
</div>

0 ответов

Другие вопросы по тегам