在CSS中动画文本移动

Question

目前，当我向下滚动页面时，主页链接bumps就位。

我如何为此设置动画，以便为我顺利移动？

http://jsfiddle.net/pux7v4tL/2/

$(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);
            $("ul#menu-primary-menu").css("top", "35%");
        }
    } else {
        if ($('#header_nav').data('size') == 'small') {
            $('#header_nav').data('size', 'big');
            $('#header_nav').stop().animate({
                height: '100px'
            }, 600);
            $("ul#menu-primary-menu").css("top", "auto");
        }
    }
});

#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

在 JQuery 中将top的定位更改为bottom，正如我在评论中提到的，您需要为任何位置赋予特定值。

在这里，我将bottom:0px;放入else和35% scroll>0。

此外，您需要。animate({....})来获得过渡效果。

<强> Working : Demo

$(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);
            $("ul#menu-primary-menu").animate({"bottom": "35%"}); // Updated
        }
    } else {
        if ($('#header_nav').data('size') == 'small') {
            $('#header_nav').data('size', 'big');
            $('#header_nav').stop().animate({
                height: '100px'
            }, 600);
            $("ul#menu-primary-menu").animate({"bottom": "0px"}); // Updated
        }
    }
});

#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 2

您更改了演示中的ul位置，忘了向该元素进行一些转换。你必须过渡到元素来动画它。

我更改了一些jquery代码，并将转换添加到ul。

Jsfiddle