如何停止滚动 header 的缩小效果?
How to stop shrinking effect on header on scroll?
我认为自己是一个 webdev 菜鸟,我通过摆弄现有示例来学习得更好。我一直在寻找一种使导航栏透明的方法,然后在向下滚动时转换为纯色背景。我在免费模板中找到了我想要的东西。它有一个我不想要的功能 - 它在滚动时缩小导航栏,我宁愿保持导航栏相同的高度。这是代码(我第一次尝试使用 Codepen,所以不要笑!):
http://codepen.io/quanticspaz/pen/zGWXYM
// jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
// jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
// Closes the Responsive Menu on Menu Item Click
$('.navbar-collapse ul li a').click(function() {
$('.navbar-toggle:visible').click();
});
是CSS还是JS导致滚动效果缩小?请让我摆脱痛苦...我已经弄乱了几个小时,它让我发疯!
在CSS中你会发现一个叫做top-nav-collapse
的class,这是当前页面滚动时设置的,有一个padding
属性 这就是造成收缩效果的原因。删除这个填充,你的问题就解决了:
.navbar-custom.top-nav-collapse {
border-bottom: 1px solid rgba(255, 255, 255, .3);
background: #000;
}
我认为自己是一个 webdev 菜鸟,我通过摆弄现有示例来学习得更好。我一直在寻找一种使导航栏透明的方法,然后在向下滚动时转换为纯色背景。我在免费模板中找到了我想要的东西。它有一个我不想要的功能 - 它在滚动时缩小导航栏,我宁愿保持导航栏相同的高度。这是代码(我第一次尝试使用 Codepen,所以不要笑!):
http://codepen.io/quanticspaz/pen/zGWXYM
// jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
// jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
// Closes the Responsive Menu on Menu Item Click
$('.navbar-collapse ul li a').click(function() {
$('.navbar-toggle:visible').click();
});
是CSS还是JS导致滚动效果缩小?请让我摆脱痛苦...我已经弄乱了几个小时,它让我发疯!
在CSS中你会发现一个叫做top-nav-collapse
的class,这是当前页面滚动时设置的,有一个padding
属性 这就是造成收缩效果的原因。删除这个填充,你的问题就解决了:
.navbar-custom.top-nav-collapse {
border-bottom: 1px solid rgba(255, 255, 255, .3);
background: #000;
}