Question

我正在尝试模仿辉煌的sagmeisterwalsh.com网站，但将Bootstrap navbar与手风琴和jquery结合使用来触发navbar滑到顶部。

一切正常，但是当浏览器首次呈现导航栏时，我无法使其导航栏停留在浏览器底部。我有折叠的导航栏上方的完整浏览器图像（根据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>

我希望这可以解决您的问题。

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

1 个答案: