У меня есть небольшая кнопка-переключатель в правом верхнем углу длинной формы, которая переключает, редактируется ли форма или нет. Он привязан к верхнему и нижнему элементам формы. Он отлично работает, когда я прокручиваю страницу вверх, но как только я дохожу до точки, где она становится липкой, она теряет эффект прикрепленного к ней класса float-right. Вот код:
<div class="columns small-8"><!-- First item of the form --></div>
<div class="columns small-4" data-sticky-container>
<div class="switch round float-right" data-sticky data-top-anchor="userID:top"
data-btm-anchor="password:bottom" data-sticky-on="small">
<input class="switch-input" id="switchEdit" name="switchEdit" type="checkbox">
<p class="help-text align-center" id="editTitle">Edit</p>
</div>
</div>
Вот как это выглядит до и после (правый край изображения является правым краем сетки на обоих изображениях):
До:
После:
ВОПРОС. Почему это происходит и как это исправить?
P.S. Я до сих пор не совсем понял, как сделать jsfiddle или codepen, потому что я относительно новичок в веб-вещах (обычно я работаю с серверной частью, но моя новая работа требует внешнего интерфейса), так что извините за это.
ОБНОВИТЬ:
Я нашел этот ответ, потому что заметил, что классы .sticky.is-stuck устанавливают position: fixed в css. Я попробовал то, что они сказали, но это просто переместило мой маленький переключатель в правую часть окна, а не в правую сторону столбца. Так что это не вариант. :/
