Question

試圖實現我自己的社交共享圖標。我已經按照自己喜歡的方式開展了一切工作，但我遇到了一個小問題。我想，讓圖標滾動一起與用戶的內容，所以我做這個使用jQuery：

HTML

<div id='blogpost'> 
    <div id='social'> 
     <ul class='fa-ul'> 
      <li class='fb'><a href="#"><i class='fa fa-facebook'></i></a></li> 
      <li class='twitter'><a href="#"><i class='fa fa-twitter'></i></a></li> 
      <li class='google'><a href="#"><i class='fa fa-google'></i></a></li> 
      <li class='linkedin'><a href="#"><i class='fa fa-linkedin'></i></a></li> 
     </ul> 
    </div> 
    <h2>Lorem Ipsum</h2> 
    <p>My text...</p> 
</div> 

JS

$(document).ready(function(){ 

    var stickyTop = $('#social').offset().top; //Get top of the social div 

    $(window).scroll(function(){ //Scroll event - executed each time user scrolls 
     var windowTop = $(window).scrollTop(); 

     if(stickyTop < windowTop){ 
      console.log('sticky'); 
      $('#social').addClass('stick'); 
     }else{ 
      console.log('normal'); 
      $('#social').removeClass('stick'); 
     } 

    }); 

}); 

的#social div有以下CSS將其稍微顯示在博文的左側。太棒了。

div#social { 
    position: absolute; 
    left: -80px; 
    top: 45px; 
} 

當我滾動然後我的.stick類添加到#social和位置從絕對更新爲固定的。這在移動設備上造成不一致。當我調整屏幕大小時，圖標顯示在帖子後面，而不是稍微靠左。有沒有一種方法可以更新我的CSS，以確保圖標總是稍微靠左？

你可以在這裏看到我的jsfiddle：https://jsfiddle.net/c7jwtcfr/4/

謝謝。

Answer 1

解決您的問題，在.stick改變左值是足夠了：

.stick{ 
    left: 18px !important; 
    position: fixed !important; 
    top: 55px !important; 
}