将导航栏从浏览器底部移动到顶部

Question

我正在尝试模仿出色的 sagmeisterwalsh.com 网站，但是使用 Bootstrap 带手风琴的导航栏和 jquery 触发导航栏滑到顶部。

一切正常，但当浏览器首次呈现时，我无法让导航栏固定在浏览器底部。我在折叠的导航栏上方有完整的浏览器图像（根据 sagmesister 网络摄像头提要）。

我曾尝试在 css 中设置带有位置标签的导航栏，但它在触发时不会释放到顶部（很明显）。请有任何想法。我怀疑可能有一个简单的 javascript 修复。

我是一个低级的前端设计师，所以任何解释都必须归结为我有限的理解。抱歉。

Answer 1

这是我做的（已编辑）：

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Navbar Fix Footer to Header</title>


    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <style>
        #header-img {
            background: url("./images/dark.jpg");
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
        }

        .navbar.affix {
            top: 0;
            width: 100%;
        }
    </style>

    <script>
        $(document).ready(function () {
            $("a").on('click', function (event) {

                if (this.hash !== "") {
                    event.preventDefault();

                    var hash = this.hash;
                    $('html, body').animate({
                        scrollTop: $(hash).offset().top
                    }, 800, function () {

                        window.location.hash = hash;
                    });
                }
            });
        });
    </script>
</head>

<body>

    <div id="header-img"></div>
    <nav class="navbar navbar-inverse" data-spy="affix" id="affix-navbar" data-offset-top="1000">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">WebSiteName</a>
            </div>
            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#somewhere1">Somewhere1</a></li>
                    <li><a href="#somewhere2">Somewhere2</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <h1>this is dummy text just for scrolling</h1>
    <h1>this is dummy text just for scrolling</h1>
    <h1>this is dummy text just for scrolling</h1>
    <h1>this is dummy text just for scrolling</h1>
    <h1>this is dummy text just for scrolling</h1>
    <h1>this is dummy text just for scrolling</h1>
    <h1>this is dummy text just for scrolling</h1>
    <h1>this is dummy text just for scrolling</h1>
    <h1>this is dummy text just for scrolling</h1>
    <h1>this is dummy text just for scrolling</h1>
    <h1>this is dummy text just for scrolling</h1>
    <h1>this is dummy text just for scrolling</h1>
    <h1>this is dummy text just for scrolling</h1>
    <h1>this is dummy text just for scrolling</h1>
    <h1>this is dummy text just for scrolling</h1>
    <h1>this is dummy text just for scrolling</h1>
    <h1>this is dummy text just for scrolling</h1>
    <h1 id="somewhere1">Somewhere1</h1>
    <h1>Somewhere1</h1>
    <h1>this is dummy text just for scrolling</h1>
    <h1>this is dummy text just for scrolling</h1>
    <h1>this is dummy text just for scrolling</h1>
    <h1>this is dummy text just for scrolling</h1>
    <h1>this is dummy text just for scrolling</h1>
    <h1>this is dummy text just for scrolling</h1>
    <h1>this is dummy text just for scrolling</h1>
    <h1>this is dummy text just for scrolling</h1>
    <h1 id="somewhere2">Somewhere2</h1>
    <h1>this is dummy text just for scrolling</h1>
    <h1>this is dummy text just for scrolling</h1>
    <h1>this is dummy text just for scrolling</h1>
    <h1>this is dummy text just for scrolling</h1>
    <h1>this is dummy text just for scrolling</h1>
    <h1>this is dummy text just for scrolling</h1>


    <script>
        let height = window.innerHeight - 50;
        let headerImg = document.getElementById("header-img");
        headerImg.style.height = height + "px";

        let nav = document.getElementById("affix-navbar");
        nav.setAttribute("data-offset-top", height);
    </script>

</body>

</html>

我希望这能解决您的问题。

将导航栏从浏览器底部移动到顶部

Move navbar from bottom to top of browser

jquery

navbar

sticky-footer