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]()