Question

在rails上使用Bootstrap 3。我的目标是让导航栏在滚动时淡入（正常工作），但在页面太短而无法滚动时也可以显示而不滚动。或者仅在主页上显示。后者是首选，但要么解决我的问题。

我的（工作）JS。

(function ($) {
      $(document).ready(function(){

        // hide .navbar first
        $(".navbar").hide();

        // fade in .navbar
        $(function () {
            $(window).scroll(function () {

                     // set distance user needs to scroll before we start fadeIn
                if ($(this).scrollTop() > 100) {
                    $('.navbar').fadeIn();
                } else {
                    $('.navbar').fadeOut();
                }
            });
        });

    });
      }(jQuery))

Answer 1

您还可以在标签中添加“主页”或任何内容，并调用相同的功能。

<body class="home"></body>
<script>
    if ($('body').hasClass('home')) {
        $('.navbar').fadeIn();
        } else {
        $('.navbar').fadeOut();
    }
</script>

Answer 2

看起来很傻但是..只需检查一下路径名吗？

if(window.location.pathname.match(/myhomepageurlregex/)){
    $('.navbar').fadeIn();
}

myhomepageurlregex是你的主页网址，如果需要，可以匹配部分网页。

Answer 3

如果您只想在一个页面上明确显示导航栏，为什么不将标签放入该页面的ERB？

<script type="text/javascript">
  $('.navbar').fadeIn();
</script>

将导航栏设置为仅在主页上淡入？

3 个答案: