I'm trying to figure out why a div is not appearing when the page is scrolled down. The issue is that my page body and most other elements have overflow hidden, except for a table that appears at a certain point on the page when a button is pressed. This table has overflow:scroll applied to it, and I've attempted to attach a scroll event to it. However, it doesn't seem to work. Any ideas on what could be causing this?
Here's my HTML:
<body>
<div class="maine">
<table id="tableToClone" class="ts">
<div class="backtotopplank"></div>
</table>
</div>
</body>
CSS:
html, body{
height:100%;
background:black;
width:100%;
}
.ts {
background:red;
border-collapse:collapse;
border-spacing:0;
margin:auto auto;
width:70%;
height:3000px;
overflow:scroll;
}
.maine{
width:70%;
margin:auto auto;
background:white;
position:relative;
overflow-x:hidden;
}
.backtotopplank{
background:black;
background-size:100% 100%;
position:fixed;
width:153px;
height:56px;
left:900px;
bottom:0px;
cursor: pointer;
display:none;
}
And JQuery:
$(".ts").scroll(function() {
var y = $(this).scrollTop();
if (y > 400) {
$(".backtotopplank").fadeIn();
} else {
$(".backtotopplank").fadeOut();
}
});