时间戳

首页 > 解决方案 > 如何在显示正文之前触发 javascript scrollTop()？

javascript - 如何在显示正文之前触发 javascript scrollTop()？

问题描述

我正在尝试渲染一个仅在向下滚动超过 650 像素后才显示的导航栏组件。我的问题是，当我刷新页面时，导航栏已经显示出来了。只有在我向下滚动页面 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，这样我就不会在刷新时看到导航栏，因为脚本放置在正文之前，这正是我所期望的。有什么建议吗？谢谢！

标签： javascripthtmlruby-on-rails

解决方案

当 dom 准备好确定是否应该显示导航栏时，您可以调用函数处理程序。

默认情况下，您必须隐藏导航栏，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;
  ...
}

推荐阅读