Question

I have a sidebar on my page for showing several items (one below the other). My sidebar is fixed on the right side of my page so when the user scrolls the page, the sidebar doesn’t move. Some items on my sidebar may be partially shown and that depends on the height of the page.

My question: is it possible to completely hide the items that are cut off?

I don’t know if I’m clear?

Thanks anyway.

Answer 1

var y = window.height;
var items = $('items selector');


items.each(function(i){
   var that = $(this);
   var height = that.height();
   var coord = that.offset();
   var itemBottom = coord.top+height;
   if(y < itemBottom){
      that.hide();
   }
});

That should work I guess, I havent;t test it though but if you have a clue you’ll be able to make it work if you don’t let me know.
Also if you need explanation on what code does I’ll explain it, either.
It wpuld be better if you fix it with css or double think your layout approach.