fixiertes Bild auf Rolle Shifting Position

Question

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

Ich bin den Aufbau einer Website mit Bootstrap 3. Scroll habe ich ein Bild, das durch Änderung der Position auf die Seite hält sich an festgelegt. Dies funktioniert jedoch immer dann, wenn es behoben wird. Ich bin mir bewusst, dass dies etwas mit den Margen zu tun hat (und ich habe mit Pixeln gespielt und dies scheint das Problem praktisch zu lösen, der Margin-Link muss ein Prozent für die responsive Website sein). Hier ist der Code:

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

Versuchen Sie, diese

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'); 
     }; 
    }); 
}); 

Ich entfernte die margin-left und hat einen Schwimmer rechts. Dann auf der JS änderte ich die Position nach links: 0. Es scheint zu funktionieren.

Answer 2

ich einige Änderungen vorgenommen, die es Arbeit gemacht:

1. Bewegen Sie den Klassennamen an das div Element anstelle des img Element
2. die CSS-Änderungen nur bei Bedarf durch eine boolesche Variable
3. mit Der 500-Pixel-Test war zu lang für die Größe des Textes. Wenn sie aufgerufen wird, würde die Größenänderung aufgrund des fixierten Bildes unter 500 sinken und eine weitere Änderung erzwingen, und so weiter.

Siehe aktualisiert jsfiddle: https://jsfiddle.net/DTcHh/19475/

Answer 3

Okay, ich dachte, dies. Was getan werden muss, ist, dass Sie eine separate Klasse auf den enthaltenden DIV setzen. Sie geben es links: (was auch immer Ihr Prozentwert hier ist). Du nimmst das verbleibende Bild vom Rand weg. Wenn Sie wie ich Bootstrap verwenden, müssen Sie umgehen Margin Probleme können Sie zwei Klassen wie ich, um den Rand der Zeile und col-sm-7 zu entfernen. In meinem Fall habe ich:

.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--> 

Aktualisiert Fidde: https://jsfiddle.net/1chkghhq/1/