javascript - 不在 View 中时绝对固定在 View 中

Question

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

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

Answer 1

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

您需要做的就是在有人调整大小时检测视口(viewport)有多大。在 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，那么您仍然可以使用大部分 相同的代码，但您必须创建一个函数来获取视口(viewport)的高度。 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);
}