CSS - 如何使相对元素跟随我上下，但不左和右？ [英] CSS - How to make a relative element follow me up and down but not left and right?

问题描述

我有一个父div与一个固定的位置和内部的div，我有主div与相对位置。当我滚动条上下滚动它跟随我（这是我想要的），但我不希望它跟随我，当我滚动条从左到右（或从右到左）。

HTML ：

 < div id =wrapper> 
< div id =icons> 
 icons 
< / div> 
< / div 
  

CSS：

  #wrapper {
 position：fixed; 
 z-index：1000; 
 top：155px; 
} 
 #icons {
 width：42px; 
 position：relative; 
 left：-67px; 
} 
  

谢谢!! b $ b

解决方案

你基本上必须改变 left 的值 #wrapper 根据其初始位置和当前 $（document）.scrollLeft（）值：

  var initSL = $（document）.scrollLeft（），
 initOL = $（'＃wrapper'）。 
 
 $（document）.scroll（function（e）{
 $（'＃wrapper'）。css（'left'，initOL  - （$（document）.scrollLeft initSL））; 
}）; 
  

查看示例&＃x2192;

I have a parent div with a fixed position and inside of that div I have the main div with a relative position. While I scroll the bar up and down it follows me (this I want) but I don't want it to follow me when I scroll the bar left to right (or right to left).

HTML:

<div id="wrapper">
   <div id="icons">
      icons
   </div>
</div

CSS:

#wrapper {
    position: fixed;
    z-index: 1000;
    top: 155px;
}
#icons  {
    width: 42px;
    position: relative;
    left: -67px;
}

Thank you!!

解决方案

You basically have to changed the left value of #wrapper based off of its initial position and the current $(document).scrollLeft() value:

var initSL = $(document).scrollLeft(),
    initOL = $('#wrapper').offset().left;

$(document).scroll(function(e){
    $('#wrapper').css('left', initOL - ($(document).scrollLeft() - initSL));
});

See example →

这篇关于CSS - 如何使相对元素跟随我上下，但不左和右？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！