Question

我的网站上有以下菜单：http://jsfiddle.net/pux7v4tL/

当您滚动标题区域缩小时，您会看到。除此之外，我想将nav元素垂直移动到块的中心。当用户滚动到顶部时，显然会将其恢复到原始状态。

如何使用当前代码实现此目的？

        $(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:'78px'
                    },600);
                }
            }
            else
            {
                if($('#header_nav').data('size') == 'small')
                {
                    $('#header_nav').data('size','big');
                    $('#header_nav').stop().animate({
                        height:'100px'
                    },600);
                }  
            }
        });

#header_nav {
  background: #1588cb;
  width: 100%;
  height: 100px;
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
}

body {
    height:9000px
}

nav {
    height:100px
}

nav ul {
    position: absolute;
    bottom: 0;
    margin: 0px;
    right: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<header style="background-color:#1588cb">
    <div id="header_nav">
		<nav class="primary menu">
		    <div class="menu-primary-menu-container">
		        <ul id="menu-primary-menu" class="menu">
		            <li id="menu-item-44" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-44"><a href="/wordpress/">Home</a></li>
		        </ul>
		    </div>
		</nav>
	</div>
</header>

Answer 1

只需更改您的Javascript和CSS代码，然后重试：

Javascript代码：

$(function(){
    $('header').prepend('<div id="menu-button"></div>');
    $('#menu-button').on('click', function(){
        var menuItems = $(".menu-primary-menu-container");
        menuItems.toggle();
    });
});

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

$(window).scroll(function(){
    if($(document).scrollTop() > 0)
    {
        $('#header_nav').addClass("new");
    }
    else
    {
        $('#header_nav').removeClass("new");  
    }
});

CSS代码：

#header_nav {
    background: #1588cb;
    width: 100%;
    height: 100px;
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    transition:all ease 0.3s; -webkit-transition:all ease 0.3s; -o-transition:all ease 0.3s; -ms-transition:all ease 0.3s; -moz-transition:all ease 0.3s;
}
#header_nav.new{
    height : 78px;
    transition:all ease 0.3s; -webkit-transition:all ease 0.3s; -o-transition:all ease 0.3s; -ms-transition:all ease 0.3s; -moz-transition:all ease 0.3s;
}

body {
    height:9000px
}

nav {
    height:100px
}

nav ul {
    position: absolute;
    bottom: 0;
    margin: 0px;
    right: 0px;
    transition:all ease 0.5s; -webkit-transition:all ease 0.5s; -o-transition:all ease 0.5s; -ms-transition:all ease 0.5s; -moz-transition:all ease 0.5s;
}
.new nav ul{
    top :35%;
    transition:all ease 0.3s; -webkit-transition:all ease 0.3s; -o-transition:all ease 0.3s; -ms-transition:all ease 0.3s; -moz-transition:all ease 0.3s;
}

Answer 2

你可以使用jquery css propery。 https://jsfiddle.net/pux7v4tL/1/

 $(function(){
        $('header').prepend('<div id="menu-button"></div>');
          $('#menu-button').on('click', function(){
              var menuItems = $(".menu-primary-menu-container");
              menuItems.toggle();
        });
    });

    $(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:'78px'
                },600);
                $('#menu-primary-menu').css('margin-right','50%');
            }
        }
        else
        {
            if($('#header_nav').data('size') == 'small')
            {
                $('#header_nav').data('size','big');
                $('#header_nav').stop().animate({
                    height:'100px'
                },600);
                $('#menu-primary-menu').css('margin-right','0%');
            }  
        }
        });

在滚动上垂直居中移动文本

2 个答案: