Make a Div Invisible While Scrolling Through Other Div in ASP.Net

Introduction

In my previous article I explained How to make a Div Floating while Scrolling Though the Other Div's of the Same Page.

In this article we will again make an interesting thing with a Div, this article will help you to hide or make a Div invisible while scrolling through another Div.

The Div that will become invisible will be visible in the full page but will become invisible while scrolling through a specified Div.

I made changes in the previous application, you can create a new one or can click on the link to view the previous application.

Step 1

First of all add a Div to your web form and make it's position fixed, also provide it's height, width and color so that it can be visible clearly.

<body>
<form id="form1" runat="server">
<div runat="server" id="show" style="position:fixed; right:0px; bottom:0px; width:100px; height:100px; background-color:red;"></div>

Step 2

Now if you run the application the application you will see a Div like this:

invisible Div1.jpg

You can see a Red colored Div at the right hand corner.

Currently if you scroll the page up or down it will remain visible all the time.

Step 3

I had added two more adjoining Divs to the previous main page in which two Divs were already there.

I had also made a change with the previous two Divs, I had added "Runat="Server"" to them, in my next step you will understand why I added this to them.

<div class="div" id="Div1" runat="server">
</div>
<div class="div" id="Div2" runat="server">
</div>
<div runat="server" class="div" id="Div3">
</div>
<div class="div" id="Div4" runat="server">
</div>

Step 4

As I already told you, I want to hide the Div while scrolling through the third Div so for that you need to add some coding to the Page Load Event.

protected void Page_Load(object sender, EventArgs e)
{
Div3.Attributes.Add("onmouseover", "document.getElementById('show').style.display = 'none';");
}

What this code will do is, it will change the display property of the Div to None that will hide this Div while I am scrolling through the third Div.

But now there is a problem; once this Div becomes invisible it will remain invisible even if you scroll through the other Divs.

Step 5

For removing this problem you again need to add some code to the Page Load:

protected void Page_Load(object sender, EventArgs e)
{
Div3.Attributes.Add("onmouseover", "document.getElementById('show').style.display = 'none';");
Div1.Attributes.Add("onmouseover", "document.getElementById('show').style.display = 'block';");
Div2.Attributes.Add("onmouseover", "document.getElementById('show').style.display = 'block';");
Div4.Attributes.Add("onmouseover", "document.getElementById('show').style.display = 'block';");
}

Now this code will help the invisible Div to BecomeVisible again while scrolling through the remaining three Divs.

Now you can check the output.

Output

invisible Div.jpg