2014-09-30 3 views
0

Пожалуйста, смотрите на веб-странице ниже. Из исходного кода, который я разместил, вы можете видеть, что плавающий 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> 

enter image description here

+1

Это не потому, что у вас есть jquery, устанавливающий наклейку в положение: fixed; top: 0; 'или это происходит до того, как вы прокрутили? – Pete

+0

возможно, установите div # наклейку на встроенный блок вместо блока – CRABOLO

+0

также укажите css для 'wrapper' и' row2' – Pete

ответ

0

Ваш 'наклейка' является плавающий, но он по-прежнему занимает немного места (ширина 170 пикселей), поэтому, если следующий div (или другой элемент) должен быть на 100% шире, у него будет недостаточно места для размещения рядом с вашей наклейкой.

Уменьшите ширину следующего элемента на 170px, и он должен соответствовать.

.row3 {width: calc(100% - 170px);}