absolute when not on view fixed when on 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
});

I have this bit of code, which fixes an element to the screen so that, when you scroll, it follows the screen. However, when I resize the window, say, to just have the header, the image is not where it should be when I scroll down. What I want is for it to be in an absolute position when it's not in view but, when it comes into view, it follows the page and is fixed. Is this possible?

score 1 · Accepted Answer · edited May 23 '17 at 10:25

Yes this is possible, almost everything is.

All you need to do is detect how large the viewport is whenever somebody resizes. It's a lot easier in jQuery than with normal 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'});
  }
}

If you don't want to use jQuery, then you can still use most of the same code, but you'll have to create a function to get the height of the 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);
}

An important thing to note: the window object's resize event can be triggered in several ways, especially on mobile. I'd suggest throwing in some event throttling just to make sure that your function is not being called too often in too short of a time. On mobile and tablets, for example, resize can be triggered by any orientation change. — Jason M. Batchelor, Mar 13 '14 at 18:19
On mobile, it wouldn't matter because the callback would be called only once. — Andrew, Mar 13 '14 at 18:40
It depends on how sensitive the device's accelerometer is, actually. It surprised me, the first time I saw it happen, too. Not saying your solution is bad; just throwing the warning out there just in case. — Jason M. Batchelor, Mar 13 '14 at 18:43
I'd be more worried about whoever is shaking their device fast and hard enough to trigger this code more than 20 times a second. A more reasonable consideration is when users on a desktop or laptop click and drag to resize their window. — Andrew, Mar 13 '14 at 19:14

absolute when not on view fixed when on view

1 Answers1