Question

请帮我一个固定的顶部导航栏，它最初是不可见的，当向下滚动时会出现。请参考http://snowehome.com的导航栏我想要一个完全具有与本网站相同功能的导航栏。

Answer 1

我不知道你的进步。你应该提一下你的进步。顺便说一下，我几天前做过同样的问题。你可以尝试一下。

SELECT 
    a.Name, a.About, 
    COUNT(b.Id) AS TotalCities, 
    SUM(b.NoOfDwellers) AS TotalCityDwellers 
FROM 
    Countries a 
LEFT JOIN 
    Cities b ON a.Id = b.CountryId 
WHERE 
    a.Name IS NULL 
GROUP BY 
    a.Name, a.About -- here!
ORDER BY 
    a.Name ASC

导航栏应为 -

 <script type="text/javascript">
            jQuery(function($) {
               function fixDiv() {
                var $cache = $('#getFixed');
                if ($(window).scrollTop() > 0)
                    $cache.css({

                    'display' : 'block',
                    'position': 'fixed',
                    'top': '0px'
              });
                 else
                 $cache.css({
                 'position': 'relative',
                 'top': 'auto',
                 'display' : 'none'
              });
           }
         $(window).scroll(fixDiv);
            fixDiv();
           });
    </script>

修改： - 在页面中添加样式

<nav class="" id="getFixed">
     <!-- your navbar code here. Just focus on the id of nav tag-->
</nav>

现在再看一下脚本。

Answer 2

实际上，http://snowehome.com处的导航栏永远不会被隐藏。发生了什么只有一个导航栏，通过过渡效果显示，并坚持到页面的顶部。

Sajeeb Ahamed提供了符合所希望行为的答案。但是，我还建议使用.css而不是$cache.addClass('navbar-fixed-top')来使导航栏保持在顶部。 Bootstrap为这类事物提供了一个类。如果您使用的是Bootstrap，则可以使用Below is the plunker with correct answer provided by https://github.com/robwormald http://plnkr.co/edit/WRXpdkAcobUKhdNpEmuo?p=preview。还有更多示例可以处理导航栏。您可以查看Bootstraps导航栏文档，您可以找到here。

如何有一个固定的导航栏只有在向下滚动时才可见？

2 个答案: