GBRSGB/CZKJ.GBRS2.WebMVC/Views/Article/Memorabilia.cshtml

@model IList<ArticleEntity>
@{
    IList<string> timeList = ViewBag.StrList;
}
@section style{
    <link rel="stylesheet" href="@ConfigHelper.GetCDNPrefix()/assets/css/bigEvent.css">
    <style>
        @@media(min-width:768px) {
            .m-header {
                height: 84px;
                display: block !important;
            }
        }
    </style>
}
<div class="container bigEvent">
    <div class="row">
        <div class="col-sm-10">
            <a class="back-nav" href="@Url.Action("AboutUs","Home")">
                <i></i> 返回关于我们
            </a>
            <h1 class="list-title">国宝人寿保险股份有限公司大事记</h1>
            <div class="time-line">
                @foreach (var time in timeList)
                {
                    var list = Model.Where(x => x.PublishTime.ToString("yyyy") == time);
                    <section class="yaer-box">
                        <h3 id="@string.Format("year{0}",time)">@time</h3>
                        <ul>
                            @foreach (var item in list)
                            {
                                <li>
                                    <span>@item.Title</span>
                                </li>
                            }
                        </ul>
                    </section>
                }
            </div>
        </div>
        <div class="col-sm-2 date-list-box">
            <ul class="date-list">
                @foreach (var time in timeList)
                {
                    <li><a href="@string.Format("#year{0}",time)">@time</a></li>
                }
            </ul>
        </div>
    </div>
</div>
@section script{
    <script>
        window.dataMark = "0$15231983314041342$$15231983816302510$";
        window.dataMark1 = "0$15231983314041342$$15231983816302510$$15234709255786494$";
        $(function () {
            //右侧时间导航点击
            $('.date-list a').on('click', function () {
                $('.date-list a').removeClass('cur');
                var id = $(this).addClass('cur').attr('href');
                var top = $(id).offset().top;
                var headerH = $('.header').height();
                $(document).scrollTop(top - headerH - 10);
                return false;
            })
            //页面滑动
            $(window).on('scroll load', function () {
                if (innerWidth <= 768) { return };
                var top = $(document).scrollTop();
                var headerH = $('.header').height();
                $('.yaer-box').each(function (i, ele) {
                    var $ele = $(ele);
                    var $eleTop = $ele.offset().top;
                    var $eleBottom = $ele.offset().top + $ele.height();
                    if (top > $eleTop - innerHeight / 2 && top < $eleBottom + innerHeight / 2) {
                        var id = $ele.children('h3').attr('id');
                        $('.date-list a').removeClass('cur');
                        console.log(id);
                        $('[href="#' + id + '"]').addClass('cur');
                    }
                })
            })
        })
    </script>
}