javascript - 结合粘性导航和过渡

Question

我有一个使用 Bootstrap 导航的 Wordpress 网站。我的 Logo /品牌下方有导航。当用户滚动到它时，我想让导航“粘贴”到屏幕顶部。一旦导航“卡住”到顶部，我希望它的高度动画更大。

我有两个单独的工作代码，但不确定如何将它们组合起来以实现我想要的。

HTML - 比例导航

<script>
 $(function(){
 var shrinkHeader = 25;
 $(window).scroll(function() {
 var scroll = getCurrentScroll();
  if ( scroll >= shrinkHeader ) {
       $('header').addClass('shrink');
    }
    else {
        $('header').removeClass('shrink');
    }
 });

  function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
  }
  });
</script>

HTML - 粘性脚本

<script>
$(document).ready(function() {
var s = $("#divname");
var pos = s.position();                    
$(window).scroll(function() {
    var windowpos = $(window).scrollTop();
    if (windowpos >= pos.top) {
        s.addClass("stick");
    } else {
        s.removeClass("stick"); 
    }
});
});
</script>

HTML - header.php

    <a class="brand" href="<?php echo home_url(); ?>/"></a>

    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
            <span class="sr-only">Toggle navigation</span> 
            <span class="icon-bar"></span> 
            <span class="icon-bar"></span> 
            <span class="icon-bar"></span> 
        </button> 

    </div>  

    <div class="navbar-collapse collapse">

...

CSS

header {
 position: fixed;
 overflow: hidden;
 z-index: 100;
 width: 100%;
 top: 0; left: 0;
 padding: 0 25px;
 text-align: center;
 background-color: rgba(250,250,250,1);
 -webkit-transition: height 0.35s ease, padding 0.35s ease;
 -moz-transition: height 0.35s ease, padding 0.35s ease;
 -ms-transition: height 0.35s ease, padding 0.35s ease;
 -o-transition: height 0.35s ease, padding 0.35s ease;
 transition: height 0.35s ease, padding 0.35s ease;
}

Answer 1

完成这个结果很简单，你需要查看.navbar-fixed-top . Bootstrap 使导航栏与此类保持一致。这里有一个例子:

JS:

$(document).ready(function() {
    $(window).scroll(function() {
        var windowpos = $(window).scrollTop();
        var navbar = $('#navbar');

        // if win >= navbar and not already a sticky
        if (windowpos >= navbar.position().top && !navbar.hasClass("navbar-fixed-top") ) {
            navbar.addClass("navbar-fixed-top");

        // if win <= navbar and is a sticky
        } else if( windowpos <= navbar.position().top && navbar.hasClass("navbar-fixed-top")  ) {
            navbar.removeClass("navbar-fixed-top");
        }
    });
});

CSS:

#navbar {
    background-color:orange;
    padding:5px;
    transition: all 0.35s ease;
}

#navbar.navbar-fixed-top {
    position: fixed;
    top:0;
    left:0;
    right:0;
    padding: 20px;
    transition: all 0.35s ease;
}

这增加了填充，但是随着 transition: all 被设置，任何 css 变量都可以正常工作。这是例子 jsfiddle没有 Bootstrap !