如何停止卷轴上标题的缩水效果？ [英] How to stop shrinking effect on header on scroll?

问题描述

我认为自己是WebDev新手，通过摆弄现有的例子我学得更好。我一直在寻找一种方法，使导航栏透明，然后在向下滚动时转换为坚实的背景。我在一个免费模板中找到了我想要的东西。它有一个我不想要的功能--它会在滚动时缩小导航栏，而我更愿意保持导航栏的高度不变。以下是代码(这是我第一次尝试Codesen，所以不要笑！)：

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的类，它当前是在页面滚动时设置的，它有一个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

这篇关于如何停止卷轴上标题的缩水效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！