滚动条上的固定按钮

Question

当我向下滚动页面时设法添加一个固定按钮，但我想将其隐藏到某个点（当导航不在视图中时）。

到目前为止，我会向您展示我的代码，希望你们能告诉我哪里出了问题。

CSS

 .fixed-btn {
    position: fixed;
    top: 60px;
    right: 80px;
    height: 100px;
    z-index: 999;
    display: none;
}

HTML

 <div class="fixed-btn">
    <a onclick="fatsomaEventsWidget.showEvent('akvmo30l')" href="#event_id=akvmo30l" class="btn btn--white-bg" href="#" role="button">Get Wristbands</a>
</div>

JS

 var wristbands = $(".fixed-btn");

wristbands.on("scroll", function (e) {

    if (this.scrollTop > 900) {
        wristbands.css('display: block;');
    } else {
        wristbands.css('display: none;');
    }

});

原文由 Sam 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我使用 Jquery 的预制 show() 和 hide() 选项对@Ivan Gajic 的解决方案进行了一些调整……以更新编码方式

$(window).scroll(function() {
    if($(document).scrollTop() > 900){
        $(".fixed-btn").show();
    } else {
        $(".fixed-btn").hide();
  }
});

原文由 George 发布，翻译遵循 CC BY-SA 4.0 许可协议