Show a fixed DIV after scrolling some pixels - html

Question

I use this code to show a fixed div after 800px of scrolling down
(function($){
$("#book-container").css({"visibility": "hidden"});
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 800) {
$("#book-container").css({"visibility": "visible"});
$('#book-container').fadeIn(1000);
} else {
$('#book-container').fadeOut(100);
}
});
})( jQuery );
(function($) {
$(document).ready(function() {
$('.hide-me').on('click', function(){
$('.book-hotels').slideToggle(500);
$('.hide-me').hide(0).delay(510);
$('.hide-me').slideToggle(200);
});
});
})( jQuery );
#media (min-width:1710px) {#book-container {
position:fixed;
bottom:calc(50% - 200px);
right:0;
}
}
#media (min-width:1710px) {.hide-me {
float:right;
background:#cc0000;
padding:2px 6px 2px 6px;
cursor: pointer;
}
}
#media (min-width:1710px) {.book-hotels{
width:250px;
height:410px;
background:#fff;
padding:22px 0 0 0;
}
}
.hide-me span {
color:#fff;
font-size:12px;
font-family:"Roboto Slab";
font-weight:700;
}
#media (max-width:1710px) {.hide-me {
visibility:hidden;
}
}
#media (min-width:1710px) {.book-hotels h3 {
white-space: nowrap;
}
}
<div id="book-container">
<div class="hide-me"><span>Hide/Show</span></div>
<div class="book-hotels"><h3>Book a Hotel</h3>some content here..
</div>
</div>
It works but I have 2 problems.
When the page loads for the first time the div is visible even close to the top, I start to scroll and it disappears as it should and reappears again at 800px from the top, so how to make it not appear on load?
And, second, the script is in two pieces, I tried to merge into one but it doesn't work, I need a little help in that.
And finally, how can I add a function to disappear again the div before it reaches the footer?
Thank you

Answer 1

Fixed, by adding and remove a css rule to fixed div, visibility:hidden on load and visible after 800 pixels.