Question

我的网站上有两个菜单栏。第一个（黑色）固定在页面顶部。一旦黑色条击中它，第二个（橙色）将变得粘稠。在同一时刻，出现了一个小徽标图像，通过使用名为＆＃34; inactve＆＃34;用＆＃34;显示：无＆＃34;并通过删除班级来显示＆＃34;不活动并添加班级＆＃34;活动＆＃34;用＆＃34;显示：inline-block＆＃34;。

动画gif在这里： https://abload.de/img/animation1lujbu.gif

现场版： http://mydivision.net/

但是来自＆＃34;显示的变化：无＆＃34; to＆＃34;显示：inline-block＆＃34;是非常突然的。任何人都可以通过从左到右显示徽标来实现这个过渡，以便社交图标轻轻地向右推？

这是我的代码：

HTML 的

<div class="topbar-container">
    <div id="slc" class="notonmobile scroll-logo inactive">
        <a href="http://mydivision.net/" title="MYDIVISION.NET | Home">
            <img src="http://mydivision.net/wp-content/themes/v1/img/scroll-logo-small.png" alt="Logo" />
        </a>
    </div>
    <div id="social_container">
        ...
    </div>
    ...
</div>
</div>

CSS

#topbar {display: inline-block; width: 100%; padding: 0; height: 40px; background: #000; position: fixed; top: 0; z-index: 9999;}
.topbar-container {margin: 6px 20px; line-height: 24px;}
.scroll-logo.inactive {display: none;}
.scroll-logo.active {display: inline-block; float: left; margin-right: 20px;}
.scroll-logo img {height: 24px; padding: 3px 0;}
#social_container {float: left; width: 192px;}

的jQuery

jQuery(document).ready(function($) {
    $(window).scroll(function() {
        if ($(this).scrollTop() >= $('.sticky-element-active').offset().top - 40) {
            $("#slc").addClass("active");
            $("#slc").removeClass("inactive");
        } else {
            $("#slc").removeClass("active");
            $("#slc").addClass("inactive");
        }
    });
});

Answer 1

我有一些运气修改你的现场CSS。你可以玩过渡时间并进一步调整，但希望这可以指出你正确的方向。

Ember.run waits for all scheduled actions to finish 
1. scheduled actions should have happened by the time ember run finishes
Expected:  true 
Result:    false

Answer 2

从CSS中删除活动和非活动，然后使用以下代码。 Jquery show（）和 hide（）会在为其设置持续时间时导致元素的扩展和收缩。

但是在你的html中保持不活动作为类名，以确保每次滚动条件发生时只发生一次扩展：

jQuery(document).ready(function($) {
    $(window).scroll(function() {
        if ($(this).scrollTop() >= $('.sticky-element-active').offset().top - 40 && $("#slc").hasClass("inactive")) {
            $("#slc").show(1000);
            $("#slc").removeClass("inactive");
        } else {
            $("#slc").hide(1000);
            $("#slc").addClass("inactive");
        }
    });
});

CSS元素从左到右显示

2 个答案: