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