滚动时的固定按钮

当我向下滚动页面时管理添加一个固定按钮，但我希望在隐藏某个点之前（当导航不在视图中时）隐藏该按钮。滚动时的固定按钮

我会告诉你我的代码到目前为止，你们可以希望告诉我我出错的地方。

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>

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

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

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

});

来源

2017-02-23 Sam Ducker

什么是你的代码的当前行为？ – Kornflexx

Javascript不起作用，所以当我从css中删除显示属性时，它的工作原理如下。我需要帮助的是在页面中的某个滚动点之前隐藏按钮。 –

试试这个

  $(window).scroll(function(){ 
        if ($(this).scrollTop() > 900) { 
         $(".fixed-btn").fadeIn(); 
        } else { 
         $(".fixed-btn").fadeOut(); 
        } 
      });

编辑：

从CSS

来源

2017-02-23 12:34:34

首先的删除display:none，你不能滚动$（ “固定BTN”），如果它是隐藏的。其次， wristbands.css('display: block;');是不正确的，你必须做wristbands.css('display','block');

尝试这样的事情。

$(window).scroll(function() { 
    if($(document).scrollTop() > 900){ 
     $(".fixed-btn").css("display", "block"); 
     // do whatever you want 
    } 
});

DEMO

来源

2017-02-23 12:37:16

$(document).scroll(function() { 
 
     var y = $(this).scrollTop(); 
 
     if (y > 85) { 
 
      $('.lead-bar').addClass("display"); 
 
     } else { 
 
      $('.lead-bar').removeClass("display"); 
 
     } 
 
    });

.para{margin-top:160px} 
 
.lead-bar{position:absolute;top:0;display:none} 
 
.lead-bar.display{display:block} 
 
.lead-bar.display a{position:fixed;top:15px;right:15px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 
<div class="lead-bar"> 
 
    <a href="#" role="button">Get Wristbands</a> 
 
</div> 
 
<p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

来源

2017-02-23 12:43:51 sayyednoman

滚动时的固定按钮

回答

相关问题