My donate page has a header with a generic placeholder image. On mobile devices like iPhones and Androids, the page initially looks great. However, when I scroll down and then back up, the header disappears for a moment before reappearing as originally rendered.
I want to ensure that the header stays in place when I scroll away from it and doesn't need to reload when I return to it.
Below is the code snippet:
.container_12 {
margin-left: auto;
margin-right: auto;
width: 1200px;
}
#student_dashboard .container_12 .grid_12 {
width: 100%;
}
.container_12 .grid_12 {
width: 90.5%;
}
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {
display: inline;
float: left;
position: relative;
margin-left: 15.0px;
margin-right: 15.0px;
}
header #logo {
display: inline-block;
float: left;
}
img {
vertical-align: middle;
display: block;
float: none;
margin: 0 auto;
}
img {
border: 0;
}<body id="student_dashboard">
<form id="form1" runat="server">
<div id="custom_bg"><img src='<%= Page.ResolveClientUrl("~/secure-image/" + idBGImage) %>'></div>
<header>
<div class="container_12">
<div class="grid_12">
<div id="logo"><img src='<%= Page.ResolveClientUrl("~/secure-image/" + idLogo)%>' width="100" height="100"></div>
<h1 id="welcome">Welcome to <span id="spanName" runat="server"></span> Fundraising page</h1>
</div>
</div>
</header>
<div class="clearfix"></div>
<div id="content">
<div class="container_12">
<div class="wrapper">
<div class="grid_4">
<div><img src='<%= Page.ResolveClientUrl("~/secure-image/" + idImage)%>' class="rounded-image-corners" /></div>
<div class="name"><span id="spanNameMain" runat="server"></span></div>
<blockquote >Please help me reach my fundraising goal! Thank you so much!
</blockquote>
</div>
<div class="grid_8">
<div class="grid_8">
<div class="padding">
<p>Welcome to my fundraiser! Thank you for being willing to participate and help me and my team! You can see how my team is doing with our fundraising goal by checking the gauge at the bottom of this page. Remember, each dollar counts!</p>
</div>
</div>
<div class="grid_8">
<div class="padding">
<h3>Donate</h3>
<p>Make a direct donation to my fundraising account by clicking the "Donate" button below.</p>
<br><br>
</div>
<div id="thermo2" class="thermometer horizontal">
<div class="track">
<div class="goal">
<div class="amount"> 1000000 </div>
</div>
<div class="progressbar">
<div class="amount">354680 </div>
</div>
</div>
</div>
<div class="padding" id="paddingbtn">
<asp:ImageButton ID="btnImageDonate" runat="server" ImageURL="~/Images/btndonate.png" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</form>
</body>