Question

当我滚动显示垂直居中的文本时，我试图让我的标题缩小。对于我的生活，我出于某种原因无法弄明白。

以下是网站http://work.nickmoyer.net的链接。我正在使用Bootstrap 3.我知道这是一个愚蠢的东西，我正在俯瞰，但我不能把手指放在它上面。

感谢您的帮助！

以下代码

导航栏

<div id="header_nav">
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <!-- Mobile display -->
        <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="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="#home" class="smoothScroll">Home</a></li>
                <li><a href="#services" class="smoothScroll">Services</a></li>
                <li><a href="<?php bloginfo('url'); ?>/portfolio/" class="smoothScroll">Portfolio</a></li>
                <li><a href="<?php bloginfo('url'); ?>/blog/" class="smoothScroll">Blog</a></li>
                <li><a href="#about" class="smoothScroll">About</a></li>
                <li><a href="#contact" class="smoothScroll">Contact</a></li>
            </ul>
        </div><!--/.nav-collapse -->
    </nav>
</div>

Javascript使div缩小

$(function(){
  $('#header_nav').data('size','big');
});

$(window).scroll(function(){
  if($(document).scrollTop() > 0)
{
    if($('#header_nav').data('size') == 'big')
    {
        $('#header_nav').data('size','small');
        $('#header_nav').stop().animate({
            height:'30px'
        },600);
    }
}
else
  {
    if($('#header_nav').data('size') == 'small')
      {
        $('#header_nav').data('size','big');
        $('#header_nav').stop().animate({
            height:'60px'
        },600);
      }  
  }
});

CSS

#header_nav .navbar-default {
    background-color:transparent !important;
    border-color:transparent !important;
}

.navbar-default {
    border-color:transparent !important;
}

#header_nav {
    width:100%;
    height:60px;
    position:fixed;
    background-color: rgb(248, 248, 248);
    top:0;
    left:0;
    z-index:10;
}

#header_nav li {
}

Answer 1

我会这样做：

http://jsfiddle.net/isherwood/Ak42Z/

$('#header_nav').stop().animate({
    height: '30px'
}, 600).find('a.smoothScroll').stop().animate({
    padding: '5px 15px 0'
}, 600);

Answer 2

这是我在js文件中所说和完成的代码

$(function(){
  $('#header_nav').data('size','big');
});

$(window).scroll(function(){
  if($(document).scrollTop() > 0)
{
    if($('#header_nav').data('size') == 'big')
    {
        $('#header_nav').data('size','small');
        $('#header_nav').stop().animate({
            height: '30px'
        }, 600).find('a.smoothScroll').stop().animate({
            padding: '5px 15px 0'
        }, 600);
    }
}
else
  {
    if($('#header_nav').data('size') == 'small')
      {
        $('#header_nav').data('size','big');
        $('#header_nav').stop().animate({
            height:'60px'
        },600).find('a.smoothScroll').stop().animate({
            padding: '15px 15px 0'
        }, 600);
      }  
  }
});


$

无论如何它对我有用！

无法垂直对齐动画div中的文本

2 个答案: