Question

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。这可能吗？

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

在视图上不固定视图时的绝对值

1 个答案: