我有一个使用 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;
}
最佳答案
完成这个结果很简单,你需要查看.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 !
关于javascript - 结合粘性导航和过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32332587/