滚动经过初始屏幕后显示 bootstrap 导航栏

Question

我有一个带有注册表单的初始屏幕，我希望带有注册表单的导航栏 link 仅在滚动过注册表单后出现。有没有办法用 jquery 来做到这一点？

Answer 1

您可以使用 scrollTop 函数和 if 语句来检查元素高度或距顶部的位置等变量。

https://api.jquery.com/scrollTop/

$(document).scroll(function() {
    var scroll = $(this).scrollTop();        

    if (scroll > x) {

    }
});

Answer 2

我写这个 jquery 是为了在您滚动到包含导航栏的容器 (#container) 顶部时将 class 'snap' 添加到导航栏。在这种情况下，我的 'snap' class 为我的导航提供了一个固定位置（相对于正文），因此它会固定在屏幕顶部。

如果您使用此代码，您可以将#container 更改为注册表单后面的块的 ID。我接下来要做的是默认隐藏你的导航栏 maybe {top:-200px;}? 然后添加一个 class （'snap' - 或者其他对你来说在语义上是有意义的）让它出现 {top:0;}.

$(window).scroll(function(scroll) {
    var navStart = $('#container').offset().top;

    var scroll = $(window).scrollTop();
    if (scroll > navStart) {
      $('nav').addClass('snap');
    } else {
      $('nav').removeClass('snap');  
    }
  });

滚动经过初始屏幕后显示 bootstrap 导航栏

Show bootstrap navbar after scroll past initial screen

html

css

jquery

navbar

twitter-bootstrap