Question

我试图在每个滚动条上将一组按钮从相对位置动画到固定位置。

HTML

<div class="menu">
    <button class="button"></button>
    <button class="button"></button>
</div>

CSS

.button {
    display: inline-block;
    position: relative;
    margin: 3px;
    height: 56px;
    width: 56px;

    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.grouped {
    z-index: 1000;
    position: fixed;
    top: 31px;
    right: 20px;
}

JS

var scrollFlag = false;

$(window).scroll(function() {
    var menu = $(".menu"),
        scrollTop = window.scrollTop;

    if(menu.offset().top <= (scrollTop + 50)) {
        if(scrollFlag == false) {
            $(".menu button").each(function() {
                var button = $(this);

                button.addClass("grouped");
            });

            scrollFlag = true;
        }
    } else {
        $("#intro div.menu button").each(function() {
            $(this).removeClass("grouped");
        });

        scrollFlag = false;
    }
});

现在按钮只是跳到固定位置。我意识到这是因为它们没有设置动画的顶部/右侧值。

我尝试通过获取按钮偏移并将其设置为顶部和左侧值来克服此问题，但这似乎也不起作用。

有什么想法吗？

Answer 1

JQuery的Zen of Python函数怎么样？

您可以执行以下操作：

//Namespace where to find your view model. App specific.
@model IDFWebApp.Models.Custom.RegistrantsViewModel
@{
    ViewBag.Title = "Event Registrants";
}

<h2>Event Registrants</h2>
@using (Html.BeginForm())
{
    @Html.DropDownListFor(model => Model.SelectedItem, Model.RaceEvents, "-- Pick a race event")

    <table style="width:100%">
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Role Type</th>
        </tr>
        @foreach (var person in Model.Registrants) //Forgot sub property (facepalm)
        {
            <tr>
                <td>@person.LastName</td>
                <td>@person.FirstName</td>
                <td>@person.RoleType</td>
            </tr>
        }
    </table>

}

Answer 2

我不认为这是好主意但无论如何

$(window).scroll(function() {
    var menu = $(".menu"),
        scrollTop = $(window).scrollTop();
    if($('.button:nth-child(1)').css('position') !== 'fixed'){
        if(menu.offset().top <= (scrollTop + 50)) {
            $(".menu button").each(function() {
                var button = $(this);

                button.addClass("grouped");
            });
        }
    } else {
        if(scrollTop  <= 31){
            $("div.menu button").each(function() {
                $(this).removeClass("grouped");
            });
        }
    }
});

JSFIDDLE

向下滚动动画并向上滚动

2 个答案: