绝对不显示时固定显示时答案

【问题标题】：absolute when not on view fixed when on view绝对不显示时固定显示时
【发布时间】：2014-04-18 07:26:08
【问题描述】：

a(this).css({
position: 'fixed',
top: "200px",
left: "1270px",
width: "30px",
height: "30px",
margin: "0"
padding: "0", 
minWidth: "65px", 
listStyleType: "none", 
zIndex: 1e7
});

我有这段代码，它将一个元素固定到屏幕上，这样当你滚动时，它就会跟随屏幕。但是，当我调整窗口大小时，比如说，只有标题，当我向下滚动时，图像不在它应该在的位置。我想要的是当它不在视图中时它处于absolute 位置，但是当它进入视图时，它跟随页面并且是fixed。这可能吗？

【问题讨论】：

标签： javascript html css

【解决方案1】：

是的这是可能的，几乎一切都是。

您需要做的就是在有人调整大小时检测视口的大小。使用 jQuery 比使用普通的 JavaScript 要容易得多。

var element = a(this);

$(document).on('resize', function(){
  // if viewport is smaller than offset (200) plus height (30) of element
  if($(window).height() < 230){
    // set element to absolute
    element.css({position: 'absolute'});
  }else{
    // set element to fixed
    element.css({position: 'fixed'});
  }
}

如果你不想使用 jQuery，那么你仍然可以使用大部分相同的代码，但是你必须创建一个函数来获取视口的高度。 JavaScript - Get Browser Height

function returnHeight() {
  var myHeight = 0;
  if( typeof( window.innerHeight ) === 'number' ) {
    //Non-IE
    myHeight = window.innerHeight;
  } else if( document.documentElement && document.documentElement.clientHeight ) {
    //IE 6+ in 'standards compliant mode'
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && document.body.clientHeight) { 
    //IE 4 compatible
    myHeight = document.body.clientHeight;
  }
  return myHeight;
}

var element = a(this);

function resizeCallback(){
  // if viewport is smaller than offset (200) plus height (30) of element
  if(returnHeight() < 230){
    // set element to absolute
    element.css({position: 'absolute'});
  }else{
    // set element to fixed
    element.css({position: 'fixed'});
  }
}

if(window.attachEvent) {
  window.attachEvent('onresize', resizeCallback);
}
else{
  window.addEventListener('resize', resizeCallback, true);
}

【讨论】：

需要注意的重要一点：窗口对象的调整大小事件可以通过多种方式触发，尤其是在移动设备上。我建议进行一些事件限制，以确保您的函数不会在太短的时间内被频繁调用。例如，在移动设备和平板电脑上，任何方向更改都可以触发调整大小。
在移动设备上，这无关紧要，因为回调只会被调用一次。
这实际上取决于设备的加速度计的灵敏度。这让我很惊讶，我也是第一次看到它发生。不是说你的解决方案不好；只是为了以防万一。
我会更担心谁在快速和用力地摇动他们的设备以触发此代码超过每秒 20 次。更合理的考虑是用户在台式机或笔记本电脑上单击并拖动以调整其窗口大小。