Fixed Image На свитке Shifting Позиция

Question

JSFiddle: https://jsfiddle.net/DTcHh/19451/

Я строй сайта, используя Bootstrap 3. На свитке у меня есть образ, который прилипает к странице, изменяя положение к фиксированному. Это работает, однако он всегда сдвигается с места, как только он становится неподвижным. Я знаю, что это имеет какое-то отношение к маржам (и я играл с пикселями, и это, похоже, практически решает проблему, левая маржа должна быть% для отзывчивого веб-сайта). Вот код:

HTML

<div class="row"> 
      <div class="col-sm-5"> 
       <h2 class="white">Some Text</h2> 
      </div> 
      <div class="col-sm-7"> 
       <img class="img-responsive screen-phone" src="img/phone.png"> 
      </div> 
</div><!--END ROW--> 

CSS

.screen-phone{ 
    max-width:300px; 
    margin-top:25px; 
    margin-left:25%; 
    z-index:999; 

} 

Javascript

$(document).ready(function(){ 

$(window).scroll(function() { 
    if ($(this).scrollTop()>1120){ 
     $('.screen-phone').css('position','fixed').css('top','0'); 
    }else{$('.screen-phone').css('position','static'); 
    }; 
}); 
}); 

Answer 1

Попробуйте

CSS

/* Latest compiled and minified CSS included as External Resource*/ 

/* Optional theme */ 
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); 

.screen-phone{ 
    max-width:300px; 
    margin-top:25px; 
    //margin-left:25%; 
    z-index:999; 
float:right; 
} 

JavaScript

/* Latest compiled and minified JavaScript included as External Resource */ 

$(document).ready(function(){ 

    // var stickyPhone = ($#) 

    $(window).scroll(function() { 
     if ($(this).scrollTop()>500){ 
      $('.screen-phone').css('position','fixed').css('right','0'); 
     }else{$('.screen-phone').css('position','relative'); 
     }; 
    }); 
}); 

Я Удален запас левые и добавил поплавок права. Затем на JS i изменилось положение слева: 0. Это швы для работы.

Answer 2

Я сделал несколько изменений, которые сделали его работу:

1. Переместить имя класса в div элемента вместо img элемента
2. сделать изменения CSS только при необходимости, используя булевы переменные
3. Тест 500 пикселей был слишком длинным для размера текста. При вызове изменение размера из-за фиксированного изображения будет уменьшаться ниже 500, заставляя другое изменение, и так далее.

Смотрите обновленный jsfiddle: https://jsfiddle.net/DTcHh/19475/

Answer 3

Хорошо, я понял это. Что нужно сделать, вы помещаете отдельный класс в содержащий DIV. Вы отдаете его слева: (независимо от вашего процентного значения здесь). Вы оставляете маркер слева от содержащего изображения. Если вы используете Bootstrap, как я, вам придется преодолевать проблемы с маркой, вы можете создать два класса, как я сделал, чтобы удалить границу строки и col-sm-7. В моем случае я сделал:

.screen-phone{ 
max-width:300px; 
margin-top:25px; 
/*Removed margin-left:25%*/ 
z-index:999; 

} 

.sticker{ 
left:25% 
} 

.zero-row{ 
margin:0; 
} 

.no-margin{ 
width:0; 
} 

HTML:

<div class="row zero-row"> 
     <div class="col-sm-5"> 
      <h2 class="white">Some Text</h2> 
     </div> 
     <div class="col-sm-7 no-margin sticker"> 
      <img class="img-responsive screen-phone" src="img/phone.png"> 
     </div> 
</div><!--END ROW--> 

Обновлено Fidde: https://jsfiddle.net/1chkghhq/1/