jquery偏移设置到菜单底部_Jquery

jquery偏移设置到菜单底部

jquery

jquery偏移设置到菜单底部,jquery,Jquery,我的jQuery代码设置为div“#date”顶部的偏移量，我希望偏移量改为“#date”的底部 JS $(window).load(function () { $(window).on("scroll resize", function () { var pos = $('#date').offset(); $('.post').each(function () { if (pos.top >= $(this).offse

我的jQuery代码设置为div“#date”顶部的偏移量，我希望偏移量改为“#date”的底部

$(window).load(function () {
    $(window).on("scroll resize", function () {
        var pos = $('#date').offset();
        $('.post').each(function () {
            if (pos.top >= $(this).offset().top && pos.top <= $(this).next().offset().top) {
                $('#date').html($(this).find('.description').text()); //or any other way you want to get the date
                return; //break the loop
            }
        });
    });

    $(document).ready(function () {
        $(window).trigger('scroll'); // init the value
    });

})

body {
    margin: 0px;
    padding: 25px;
    font-family: helvetica, arial;
    font-size: 9pt;
}

.holder {
    width: 100%;
}

.main {
    padding-left: 225px;
    width: 640px;
    font-family: helvetica, arial;
    font-size: 9pt;
    float: left;
} 

.info {
    width: 180px;
    font-family: helvetica, arial;
    font-size: 9pt;
    float: left;
    margin-left: 885px;
    position: fixed;
} 

p.content {
    width: 180px;
    border-top: 1px solid #CCCCCC;
    padding-bottom: 5px;
    padding-top: 5px;
    margin: 0px;
}

.post {
    border: 1px dashed grey;
    margin-right: 50px;
    margin-bottom: 20px;
}

#date {
    position:fixed;
    top:25px;
    right:20px;
    height: 90px;
    width: 45px;
    background: grey;
}

.Desc {
    width: 200px;
    font-family: helvetica, arial;
    font-size: 9pt;
    float: left;
    position: fixed;
    background: grey;
}

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
    <div class="holder">

        <div class="main">
            <div style='height:200px;' class='post'>
                <p class="description" style="display: none;">content one description</p>
                Website Other Stuff
                <br/>Other Stuff
            </div>
            <div style='height:250px;' class='post'>
                <p class="description" style="display: none;">content two description</p>
                Packaging
            </div>
            <div style='height:350px;' class='post'>
                <p class="description" style="display: none;">content three description</p>
                Mobile Website
            </div>
            <div style='height:200px;' class='post'>
                <p class="description" style="display: none;">content four description</p>
                Proposal Book
            </div>
            <div id='date'></div>
            <div style='height:800px;'></div>
        </div>
    </div>
</body>


内容一描述
网站其他东西

其他东西
内容二描述
包装
内容三描述
移动网站
内容四描述
提案书

获取偏移量加上高度，并将其用于目标顶部位置

$(window).load(function () {
    $(window).on("scroll resize", function () {
        var target = $('#date').offset().top + $('#date').height();
        $('.post').each(function () {
            if (target  >= $(this).offset().top && target  <= $(this).next().offset().top) {
                $('#date').html($(this).find('.description').text()); //or any other way you want to get the date
                return; //break the loop
            }
        });
    });

    $(document).ready(function () {
        $(window).trigger('scroll'); // init the value
    });

})

$（窗口）。加载（函数（）{
$（窗口）。打开（“滚动调整大小”，函数（）{
var target=$（'#date'）.offset（）.top+$（'#date'）.height（）；
$（'.post'）。每个（函数（）{
如果（目标>=$（此）.offset（）.top和目标（&T）