如何停止滚动标题上的收缩效果?

时间:2015-07-08 10:14:03

标签: css header navbar nav

我认为自己是一名webdev noob,我通过搞乱现有的例子来学习。我一直在寻找一种使导航栏透明的方法,然后在向下滚动时转换为纯色背景。我在免费模板中找到了我想要的东西。它有一个我不想要的功能 - 它在滚动时收缩导航栏,我宁愿保持导航栏的高度相同。这是代码(我第一次尝试使用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会导致滚动缩小效果?请把我从我的痛苦中解脱出来......我现在已经搞乱了几个小时而且它让我疯狂了!

1 个答案:

答案 0 :(得分:1)

在CSS中,您将找到一个名为top-nav-collapse的类,当页面滚动时,它正在设置,并且具有padding属性,这是导致缩小效果的属性。删除此填充,您的问题就解决了:

.navbar-custom.top-nav-collapse {
    border-bottom: 1px solid rgba(255, 255, 255, .3);
    background: #000;
}

Here is an update to your codepen example