滾動時的固定按鈕

當我向下滾動頁面時管理添加一個固定按鈕，但我希望在隱藏某個點之前（當導航不在視圖中時）隱藏該按鈕。滾動時的固定按鈕

我會告訴你我的代碼到目前爲止，你們可以希望告訴我我出錯的地方。

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

滾動時的固定按鈕

回答

相關問題