Ok this can’t be possible with css only.So, taking help from this
http://stackoverflow.com/questions/3730035/how-to-change-css-using-jquery
By using jquery finally managed to do this.Here’s code:
<html>
<head>
<style>
.total
{
width:100%;
border:2px solid red;
height:800px;
}
.totalinner
{
width:1100px;
border:1px solid blue;
height:800px;
margin:auto;
}
.fixedclass
{
position: fixed;
top:10px;
/* scrolling out of view :-( */
display:block;
//height:20px;
background-color:pink;
}
.sideclass
{
width:800px;
border:1px solid yellow;
height:800px;
float:right;
}
.total2
{
width:100%;
border:1px solid red;
height:700px;
margin-top:20px;
}
.totalinner2
{
width:1100px;
border:1px solid blue;
height:700px;
}
</style>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(window).on('scroll', function() {
var scrollTop = $(this).scrollTop();
$('.total').each(function() {
var topDistance = $(this).offset().top;
if ( (topDistance+750) < scrollTop ) {
//alert( $(this).text() + ' was scrolled to the top' );
$("#fixedclass").css({"display": "none"})
}
});
});
$(window).on('scroll', function() {
var scrollTop = $(this).scrollTop();
$('.total').each(function() {
var topDistance = $(this).offset().top;
if ( (topDistance+750) >scrollTop ) {
//alert( $(this).text() + ' was scrolled to the top' );
$("#fixedclass").css({"display": "block"})
}
});
});
</script>
</head>
<body>
<div class="total">
<div class="totalinner">
<div class="fixedclass" id="fixedclass">
<h1>FIXED</h1>
</div>
<div class="sideclass">
<p>.................</p>
<p>.................</p>
<p>.................</p>
<p>.................</p><p>.................</p>
<p>.................</p>
<p>.................</p>
<p>.................</p>
<p>.................</p>
<p>.................</p>
<p>.................</p>
<p>.................</p>
<p>.................</p>
<p>.................</p>
<p>.................</p>
<p>.................</p>
<p>.................</p>
<p>.................</p>
<p>.................</p>
<p>.................</p>
</div>
</div>
</div>
<div class="total2">
<div class="total2inner">
</div>
</div>
</body>
</html>
