如何在顯示正文之前觸發javascript scrollTop（）？

Question

我正在嘗試渲染僅向下滾動超過650px后才顯示的導航欄組件。 我的問題是，當我刷新頁面時，導航欄已經顯示。 僅當我向下滾動頁面1px后，一切都開始工作。

//application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>Coop Interface</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <script src="https://kit.fontawesome.com/062b3abfa0.js"></script>

  </head>

  <body>
    <%= yield %>
  </body>

</html>

//navbar.js
$(document).scroll(function () {
    var y = $(this).scrollTop();
    if (y > 650) {
        $('.secondary_navbar-coop').fadeIn();
    } else {
        $('.secondary_navbar-coop').fadeOut();
    }

});

//_navbar.scss
.secondary_navbar-coop {
  z-index: 1;
  position: fixed;
  display: flex;
  top: 0;
  width: 100vw;
  height: 108px;
  align-items: baseline;
  justify-content: space-between;
  background: #F7FAFB;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.10    );      
  font-family: Roboto;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;    
  padding-left: 60px;
  padding-right: 60px;
  padding-top: 8px;
}

我希望在顯示正文之前會觸發javascript，因此我不會在刷新時看到導航欄，因為腳本是放在正文之前的，這正是我期望的。 有什么建議嗎？ 謝謝！

Answer 1

您需要在init上調用相同的代碼：

$(function() {
    $(document).scroll(function () {
        var y = $(this).scrollT op();
        if (y > 650) {
            $('.secondary_navbar-coop').fadeIn();
        } else {
            $('.secondary_navbar-coop').fadeOut();
        }
    }).scroll();
});

如果在關閉</body>之后包含了navbar.js則不需要包裝$(function() { }); 您只需要一個腳本就可以了。

Answer 2

當dom准備好確定是否應顯示導航欄時，可以調用函數處理程序。

默認情況下，您必須使用display: none隱藏導航欄display: none可以防止在加載文檔時出現導航欄意外滑動

//navbar.js
function scrollHandler() {
  var y = $(window).scrollTop();
  var $navBar = $('.secondary_navbar-coop');

  if (y > 650) {
    if ($navBar.is(':visible') {
      $navBar.css({opacity: 0, display: 'flex'}).animate({opacity: 1}, 400);
    }
  } else {
    $navBar.fadeOut();
  }
}

$(function() {
  $(document).scroll(scrollHandler);
  // scrollHandler will be called when the dom is ready
  scrollHandler();
});

//_navbar.scss
.secondary_navbar-coop {
  display: none;
  ...
}

Answer 3

通過使用事件監聽器來檢測所有滾動事件的最簡單方法如下。

window.addEventListener('scroll', function(){ 
       var y = $(this).scrollTop();
        if (y > 650) {
            $('.secondary_navbar-coop').fadeIn();
        } else {
            $('.secondary_navbar-coop').fadeOut();
        }
}, true);

將此添加到您的主JS文件中。

如何在顯示正文之前觸發javascript scrollTop（）？

問題描述

3 個解決方案

解決方案1
1 2019-08-15 16:00:43

解決方案2
1 已采納 2019-08-15 16:08:48

解決方案3
0 2019-08-15 16:29:40

如何在顯示正文之前觸發javascript scrollTop（）？

問題描述

3 個解決方案

解決方案1 1 2019-08-15 16:00:43

解決方案2 1 已采納 2019-08-15 16:08:48

解決方案3 0 2019-08-15 16:29:40

解決方案1
1 2019-08-15 16:00:43

解決方案2
1 已采納 2019-08-15 16:08:48

解決方案3
0 2019-08-15 16:29:40