Question

所以我已经看过以前的一些答案，如：

bootstrap static to fixed navbar jumping on scroll

How to Bootstrap navbar static to fixed on scroll?

但他们似乎并没有解决这个问题的核心问题。我已经在官方bootstrap导航栏文档和我放的第一个链接中添加了填充，但它仍然使它在修复时看起来像。我希望有一种方法可以尽可能顺利地进行固定转换。

这是我的jsfiddle和我的代码：

JS：

//Adds smooth scrolling to page start
$("#scrollToMain a").on("click", function (e) {
    e.preventDefault();
    var hash= this.hash;
    $('html, body').animate({
        scrollTop: $(hash).offset().top
    }, 700, function() {
        window.location.hash = hash;
    });
});

$(window).scroll(function () {
    //Checks to see if the nav button is fully visible
    if(!$("#scrollToMain").visible(true)) {
        $(".navbar").addClass("navbar-fixed-top");
    } else {
        $(".navbar").removeClass("navbar-fixed-top");
    }
});

HTML：

 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">One more separated link</a></li>
                  </ul>
                </li>
              </ul>
              <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                  <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
              </form>
              <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                  </ul>
                </li>
              </ul>
            </div><!-- /.navbar-collapse -->
          </div><!-- /.container-fluid -->
        </nav>


        <div class="jumbotron" id="startContent" style="width:100%; background-color:yellow;"><h1>I am here now</h1>
        <h1>Me too</h1><h1>Me three!</h1><h1>Me three!</h1><h1>Me three!</h1><h1>Me three!</h1><h1>Me three!</h1><h1>Me three!</h1><h1>Me three!</h1><h1>Me three!</h1><h1>Me three!</h1><h1>Me three!</h1><h1>Me three!</h1><h1>Me three!</h1></div>

https://jsfiddle.net/6z492Lry/

当您下到页面时跳转时出现问题，当导航栏固定时，它非常明显。我希望这种过渡顺利进行。不要单击箭头，因为自动滚动会隐藏问题。

由于

Answer 1

效果就在那里，因为当您修改导航时，您的其他内容会向上移动。

您可以创建另一个与导航具有相同高度的元素，并仅在导航修复时显示它。

CSS

.navbar-fill-space {
  height: 50px;
}

HTML

<div class="navbar-fill-space hidden"></div>        
<nav class="navbar navbar-inverse navbar-transparent">

JS

$(window).scroll(function () {
    //Checks to see if the nav button is fully visible
    if(!$("#scrollToMain").visible(true)) {
        $(".navbar").addClass("navbar-fixed-top");
        $(".navbar-fill-space").removeClass("hidden");
    } else {
        $(".navbar").removeClass("navbar-fixed-top");
        $(".navbar-fill-space").addClass("hidden");
    }
});

jsFiddle

Bootstrap导航栏从静态到固定的吃内容/抖动效果

1 个答案: