Question

如何在此网站上滚动导航栏变小？这个过程非常顺利。

我知道它可能是在JQuery中完成的。

Answer 1

您可以在窗口对象上有一个scroll event处理程序，用于切换文档正文中的类。然后从CSS中将设计设置为您想要的样子。至于平滑性，jQuery有一个animate函数可以跨浏览器，但通常用CSS transition来完成。

您可以看到您提供的网站作为示例执行此操作，因为您滚动并且标题元素的类更改为“＆＃39; short＆＃39;”。您可以在custom.js中找到他们的代码：

// Scroll to top
    jQuery(window).scroll(function ()
    {
        if (jQuery(this).scrollTop() > 100)
        {
            jQuery('header.navbar').toggleClass('short', true);
            jQuery('.scrollup').fadeIn(300);
            jQuery('.scrollup-jobs').fadeIn(300);
        }
        else
        {
            jQuery('header.navbar').toggleClass('short', false);
            jQuery('.scrollup').fadeOut(1000);
            jQuery('.scrollup-jobs').fadeOut(1000);
        }
    });

Answer 2

制作2个css类，其中一个用新类。我将.smaller作为一个像这样的新课程

<强> CSS

.navigation{
  /*css for larger navigation*/
}

.navigation.smaller{
  /*css for smaller navigation*/
}

您需要为这两个条件编写css，然后应用一些jquery

<强> JQUERY

$(document).ready(function(){
    $(window).scroll(function(){
        var windowScrol = $('html, body').scrollTop();
        if(windowScrol>=100){ //scroll value can be changed accordingly
            $('.navigation').addClass('smaller');
        } else {
            $('.navigation').removeClass('smaller');
        };
    });
});

上面的jquery会检测你是否将窗口滚动到100px，它会将类添加到导航中，而css已经存在了。

Answer 3

这是一个例子。你需要在滚动到特定高度时应用一个类，在CSS中你必须在添加该类时缩小它。

＆＃13;

$(document).scroll(function() {
  if ($(document).scrollTop() > 100) {
    $('.header').addClass('shrinkIt');
  } else {
    $('.header').removeClass('shrinkIt');
  }
})

＆＃13;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.header {
  width: 100%;
  background: rgba(255, 255, 255, 0.6);
  position: fixed;
  top: 0px;
  left: 0px;
  padding: 50px 100px;
  transition: all .3s ease;
  font-size: 22px;
}
.header.shrinkIt {
  padding: 20px 100px;
  font-size: 16px;
}
.content {
  background: #2b2b99;
  height: 1400px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="header">
    I will shrink.
  </div>

  <div class="content">



  </div>
</div>

＆＃13;

滚动时导航较小

3 个答案: