定影圖像上滾動移動位置

的jsfiddle：https://jsfiddle.net/DTcHh/19451/定影圖像上滾動移動位置

我建立使用引導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'); 
    }; 
}); 
});

來源

2016-04-16 user5854648

試試這個

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上我將位置改爲左邊：0。它接縫工作。

來源

2016-04-16 20:35:05 user3491634

把網站上時，並在完成時，這只是導致手機關閉屏幕完全移動小提琴，它仍然從它的初始位置轉移。 – user5854648

我做的，使工作的幾個變化：

移動類名的div元素img元素而不是
只在必要時使用布爾變量
讓CSS變化500像素的測試對於文本的大小來說太長了。當被調用時，由於圖像被固定而導致的尺寸變化會縮小到低於500，從而導致另一個變化，等等。

查看更新的jsfiddle：https://jsfiddle.net/DTcHh/19475/

來源

2016-04-16 20:49:19 yk11

這並不能阻止手機跳過它的位置。當它達到點時，它仍然會轉移。在我正在測試這個的小提琴和網站中都是如此。 – user5854648

然後我不確定你在找什麼行爲。查看更新的jsfiddle：https：//jsfiddle.net/DTcHh/19484/。我添加了更多文本，並基於500像素進行測試。一旦你向下滾動500個像素，手機就會出現在屏幕上的固定位置。 – yk11

圖像應該已經像我原來的小提琴一樣加載到DIV中。當它變成「固定」時，它應該堅持頁面。利潤率不應該改變。因此它不應該向上，向下，向左或向右突出。這與當您向下滾動網頁並且側欄與廣告保持原位時類似。當他們堅持到位時，他們不會轉移，他們只是簡單地堅持到位。 – user5854648

好吧，我想通了這一點。需要做的是你對包含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/

來源

2016-04-19 16:47:36 user5854648

定影圖像上滾動移動位置

回答

相關問題