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

Question

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

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

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

感谢您的帮助。

Answer 1

关于上面的标志和下面的导航栏：

这很简单，就像在 HTML 中切换顺序一样，没有什么别的了。

使导航栏向上滑动

这可以通过使用 jQuery 来实现，准确地说是 .slideUp() 和 .slideDown() 方法。或者我不确定，但我认为你可以用 CSS3 做到这一点。

来源：

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));
        });
    });