Пожалуйста, смотрите на веб-странице ниже. Из исходного кода, который я разместил, вы можете видеть, что плавающий div фактически находится под изображением div, однако на странице изображение div остается ниже плавающего div. Но я хочу, чтобы плавающий div оставался на боковой панели и перемещал изображение div чуть ниже главного меню.Плавающий div занимает целую строку вместо использования только левого пространства
В принципе, все, что я хочу, это плавающий div, так что, когда я перемещаю страницу вниз, плавающий div всегда будет придерживаться того же положения. Как сделать плавающий div слева только занимать место слева. Я не хочу, чтобы образ div находился под плавающей строкой div. Должен ли я просто изменить стиль css?
Мой CSS:
.fl_left{float:left;}
.clear {
clear:both;
}
div#sticker {
display: block;
padding:20px;
margin:20px 10px;
background:#fff;
width:170px;
text-align: center;
}
.stick {
position:fixed;
top:0px;
}
Мой Javascript (я использую JQuery):
<script type="text/javascript">
$(document).ready(function() {
var s = $("#sticker");
var pos = s.position();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
if (windowpos >= pos.top) {
s.addClass("stick");
} else {
s.removeClass("stick");
}
});
});
</script>
Мой HTML:
<div class="wrapper row2">
<div><img src="../images/Homepage_image.jpg" alt="" /></div>
</div>
<div class="fl_left" id="sticker">
<p class="wechatholder"><img src="../images/wechat.png" alt=""/></p>
<p>微信号: linaielts</p>
<p>关注微信客服号获取更多优惠信息</p>
</div>
<div class="wrapper row3">
</div>
Это не потому, что у вас есть jquery, устанавливающий наклейку в положение: fixed; top: 0; 'или это происходит до того, как вы прокрутили? – Pete
возможно, установите div # наклейку на встроенный блок вместо блока – CRABOLO
также укажите css для 'wrapper' и' row2' – Pete