向下滚动时弹出header

Question

我想模仿this page的header。这意味着：

1) 页面加载后，header 在宣传图片

中

2) 向下滚动时，header弹出并改变颜色

我还没有找到它的代码是如何实现的。有谁知道实现这一点的机制？

Answer 1

使用Bootstrap affix组件改变页面滚动时的导航栏样式。

<div class="navbar navbar-default navbar-fixed-top" data-spy="affix" data-offset-top="400">


.affix {
  /* fixed navbar style */
}

.affix-top {
  /* navbar style at top */
  background:transparent;
  border-color:transparent;
}

将 data-offset-top 属性设置为您希望导航栏过渡的像素高度。

演示 http://bootply.com/uldEaDBZOj

Answer 2

希望这对您有所帮助。

<style>

/* Initial Styling Applied Here */
header{
}  

/* Wanted Styling While Fixed */
header.fixed{
    position:fixed;
    top:0;
    z-index:100;
}    

</style>

在 HTML 中创建您的 header（这可以是任何容器，真的）

<header></header>

在 JS/jQuery

中创建您的事件处理程序

<script>
// On Scroll
$(window).scroll(function(){
    // If we have scrolled more than 10px
    if($(document).scrollTop() > 10){
        // Add class "fixed" to header element
        $('header').addClass('fixed');
    // Otherwise
    }else{
        // If header already has "fixed" class
        if($('header').hasClass('fixed')){
            // Remove said class
            $('header').removeClass('fixed');
        }
    }
});
</script>

Answer 3

const body = document.body;
const header = document.querySelector("header");
const scrollUp = "scroll-up";
const scrollDown = "scroll-down";
let lastScroll = 0;

window.addEventListener("scroll", () => {
  const currentScroll = window.pageYOffset;
  if (currentScroll == 0) {
    header.classList.remove(scrollUp);
    return;
  }

  if (currentScroll > lastScroll && !body.classList.contains(scrollDown)) {
    // down
    header.classList.remove(scrollUp);
    header.classList.add(scrollDown);
  } else if (
    currentScroll < lastScroll &&
    header.classList.contains(scrollDown)
  ) {
    // up
    header.classList.remove(scrollDown);
    header.classList.add(scrollUp);
  }
  lastScroll = currentScroll;
});

向下滚动时弹出header

Pop up header when scrolling down

html

css

scrollto

twitter-bootstrap