How to "fake" end of the page

Question

I would like to set the page to end (stop scrolling) at a certain web part. The reason is, I have a large area at the bottom of my page that I don't want to show. The reason I have this space is because I have multiple webparts that are set to position:relative so that they overlap. It appears when you do this, you are left with whitespace of where the webpart originally lived.

Anyone know CSS code or JavaScript code I could use to say 'When scrolling reaches this webpart, don't let scrolling go any further'?

Thanks

Jeremy

Answer 1

Thanks - I actually finally figured it out.

I couldn't use display:none because I still needed the webpart to display. The key to get the negative margin to work was float left. I never tried this because I wanted my items centered. Adding a width 100%; aligned it back up and now I have no blank areas from where the webparts were!

My code giving me blank areas:

position: relative;
top: -150px;

How to fix it:

position: relative;
float: left
width: 100%;
top: -150px;
margin-top: -150px;

Answer 2

Answer is Content Editor Web Part:

Steps:

1. Create the group or audience of people to hide web parts from users you do not want to scroll
2. Take ID of web part that is taking up the space (F12 Method)

3. Add below css in CEWP that will hide the web part space

---

<style type="text/css">
   #MSOZoneCell_WebPartWPQ2
   {
     display:none;
   }
</style>