滚动一些像素后显示固定的DIV

如何解决滚动一些像素后显示固定的DIV

我使用此代码在向下滚动800px后显示固定的div

 

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

可以，但是我有2个问题。当页面第一次加载时，即使在顶部附近也可以看到div，我开始滚动，它消失了，并从顶部开始以800px重新出现，那么如何使其在加载时不出现？其次，脚本分为两部分，我尝试将其合并为一个，但它不起作用，对此我需要一点帮助。

最后，我如何添加一个函数以使div在到达页脚之前再次消失？

谢谢

解决方法

通过在固定div上添加和删除css规则来解决此问题，即可见性：在加载时隐藏，在800像素后可见。