Bootstrap - 顶部的徽标和徽标下方的导航栏

Question

我想创建一个轻量级的响应式网站。 Bootstrap是最简单的方法。 我在startbootstrap.com找到了简单的主题，但我不想在顶部修复菜单。 我想在它顶部放置一个徽标和菜单。当用户向下滚动时，徽标将消失，菜单将固定为顶部。 我只能通过例子解释这个：

我不想要这个：http://ironsummitmedia.github.io/startbootstrap-modern-business/

我想要这样的导航菜单和徽标：http://webyzona.com//templates/themeforest/globalnews/#

感谢您的帮助。

Answer 1

关于顶部的徽标及其下方的导航栏：

这很简单，因为在HTML中切换顺序，没有更多内容。

使导航栏向上滑动

这可以通过使用jQuery，.slideUp（）和.slideDown（）方法来实现。或者我不确定，但我认为你可以使用CSS3。

来源（S）：

JQuery SlideUp

JQuery SlideDown

使用bootstrap

如果你想要一个轻量级的网站我不建议你引导。因为有很多你永远不会使用的东西。而是查看SASS和Mediaquery的。

Media queries

SASS/SCSS

看完你的帖子后，说实话，我认为你应该投资制定一个网站计划，并对其进行一些研究和开发。对于我们来说，有一些源代码可以让我们更轻松！ ：）

Answer 2

这只是 DEMO you need to add menu items

$(document).ready(function() { 
        var $header = $("header"),
            $clone = $header.before($header.clone().addClass("clone"));

        $(window).on("scroll", function() {
            var fromTop = $(window).scrollTop();
            console.log(fromTop);
            $("body").toggleClass("down", (fromTop > 20));
        });
    });